각도 4의 index.html에 대한 타이프 스크립트 코드는 어디서 작성해야합니까?

-1

내 navbar 코드는 모든 페이지에서 동일합니다 .... 그래서 index.html에 navbar 용 HTML과 angular 4의 styles.css에 스타일을 포함 시켰습니다. src 디렉토리에 있지만이 index.html 파일의 typescript 코드는 어디에 쓸 수 있습니까? # nav-icon 요소를 클릭하면 iconAnimate() 함수를 호출해야합니다.각도 4의 index.html에 대한 타이프 스크립트 코드는 어디서 작성해야합니까?

다음은 내 코드

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Wiz</title> 
<base href="/"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!--Favicon --> 
<link rel="icon" type="image/x-icon" href="favicon.ico"> 
<!--Bootstrap CDN --> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
<body> 
<div class="navbar navbar-default navbar-fixed-top" id="logo-container"> 
    <img src="../../../assets/images/logo.png" id="logo"> 
    <div (click)="iconAnimate()" id="nav-icon"> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
</div> 

<app-home></app-home> 

</body> 
</html>

출처

2017-10-23 Karthik Samyak

nav 컨트롤러를 만들고 코드를 index.html이 아닌 다른 곳에 두어야합니다. –

다른 앱과 함께 내비게이션 막대가 ''인 이유는 무엇입니까? 그리고 왜 당신은 Angular-cli를 단순히 사용하지 않고 있습니까? Angular-cli는 모듈과 구성 요소, 서비스 및 기타 요소들을 생성 해줍니다. –

'iconAnimate()'메소드가하는 일은 무엇입니까 (아이콘에 애니메이션 효과를 주지만 어떻게 동작합니까?). 순수한 JavaScript를 사용하여 기능을 구현할 수 있습니까? – DGarvanski

-2

당신은 모든 것을 (컨트롤러와 같은) 그 자체 (타이프) 구성 요소와 구성 요소 템플릿해야합니다. 난 당신이 잘못 약간의 점점 생각 ... <app-root></app-root>

을 : 인덱스에

는로 응용 프로그램을로드하려고합니다. Angular 4의 설명서 또는 자습서를 확인하십시오. 여기서 내가 의미하는 바를 명확히 할 것입니다!

출처

2017-10-23 12:29:05 user1141796

각도 4는 구성 요소 기반 아키텍처를 권장합니다. 그래서 모든 것은 구성 요소 여야합니다 (구성 요소에는 자체 HTML, CSS, Typescript가 있어야합니다). 인덱스 파일에서 app-home 구성 요소를 사용하고 있기 때문입니다. app-home 구성 요소 (.css, .html, .ts 파일)가 있다고 가정합니다. app-home.html에 navbar html을 입력하고 app-home.ts에 click 이벤트를 추가하십시오.

추신 : 2/4 각도를 처음 사용하는 경우 각도 cli를 사용하십시오.

출처

2017-10-23 12:35:28

해당 코드를 삽입 할 때 app.component.html 파일을 사용하는 것이 가장 좋습니다. 이 구성 요소는 기본적으로 애플리케이션이 실행 된 후에 표시되므로 navbar HTML 코드를 해당 app.component.ts 파일의 해당 Typescript 코드에 배치하십시오. 클릭 방법을 사용하려면 app.component.css 파일의 div에 애니메이션 용 코드를 배치하고 싶을 것입니다.

styles.css에 부트 스트랩 코드를 가져 오는 것이 가장 좋지만 CDN에 대한 HTML 참조를 포함 시키려면 app.component.html에 팝업하십시오.

출처

2017-10-24 02:01:57 oflad

각도 4의 index.html에 대한 타이프 스크립트 코드는 어디서 작성해야합니까?

답변

관련 문제