Angular4 공부하기 2

--------------------------------------------------

새 페이지 만들어서 메인페이지에 삽입하기

기본적으로 html,css,ts 이렇게 3가지 파일이 필요함.

1) cities폴더를 통째로 복사해 새로운 이름을 지어주고, 안에 있는 파일들도 이름을 바꿔줌.

나는 test_file로 함( _는 되는데 -는 안되니까 참고)

2) test_file.component.html에서 원하는 대로 내용을 바꿔본다.

<h1>저는 test_file의 h1태그입니다.</h1>
<p>저는 test_file의 p태그입니다.</p>

3) test_file.component.ts에서 최소 4군데를 바꿔준다.

4) cities.component.html에 가서 selector 이름을 써준다.

5) app.module.ts에 가서 추가.

6) 완성

--------------------------------------------------

{{}}

1) .ts에서 값을 작성

2) .html에서 {{이름}}을 추가

<p>안녕하세요. {{title}}</p>

3) 완성

--------------------------------------------------

변수와 ngOnInit의 우선순위(ngOnInit의 overwrite 1)

1) .ts에서 똑같은 값을 바깥이랑 ngOnInit안에 작성

(this 빼먹으면 까만색 화면과 뻘건 글씨를 볼 수 있음 ^ㅗ^)

2) html에 {{name}} 써줌

3) 결과

--------------------------------------------------

변수 적는 방법(ngOnInit의 overwrite 2)

1)

1) .ts에 이렇게 써줌

2) html에 이렇게 써줌

<p>안녕하세요. 제 이름은 {{name}}이고 나이는 {{age}}입니다.</p>

3) 결과

2)

1) .ts에 이렇게 써줌

2) 결과

아무튼 ngOnInit의 값으로 덮어쓴다는 것임.

--------------------------------------------------

변수 적는 방법 추가사항, 주의사항

*) .ts에 이렇게 써줌

export class Test_fileComponent implements OnInit {
  name:string;
  age:number;
  address: {
    street:string,
    streetNumber:number
  };
  hobbied:string[];
 
  ngOnInit() {
    this.name = "adele";
    this.age = 21;
    this.address = {
      street: "Main st",
      streetNumber: 50,
    }
    this.hobbies = ["cooking","hiking"];
  }
}

1) 타입이 틀리면 오류메세지가 뜬다.

age: number라고 해놓고선 값쓸때 age = "hello" 이렇게 다른 타입을 써버리면 오류가 뜨게 됨.

2) 값이 틀리면 오류메세지가 뜬다.

address안에는 street, streetNumber가 있는데,

this.address = {

like: "apple",

streetNumber: "50"

}

이렇게 다른 값을 쓰면 오류가 뜨게 됨.

constructor()와 ngOnInit()의 차이

constructor는 ES6이며 클래스에서 객체를 생성하는 시점에 호출되는 메서드.

앵귤러가 아닌 더 밖에 있는 자바스크립트가 제어하기 때문에, 앵귤러 컴포넌트가 초기화되었는지 알기 어려움.

그래서 객체 생성 시점에 간단한 초기화 로직을 넣을때만 사용.

ngOnInit은 앵귤러가 제공하는 문법이고 앵귤러가 컴포넌트 초기화 이후에 실행하는 메서드.

음 자세히 뭐라 말해야될지 모르겠는데 두개 순서 바꿔봤는데 constructor가 먼저 실행됨. 그리고 앵귤러가 제공하는 기능을 쓸꺼면 ngOnInit에다가 쓰라고 한다.