나머지_개발

Angular4 공부하기 2

킹king 2018. 5. 14. 10:47
반응형




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


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


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



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

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



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


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


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



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



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



6) 완성




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



{{}}


1) .ts에서 값을 작성



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


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


3) 완성




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



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


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



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


2) html에 {{name}} 써줌


3) 결과




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



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


1)


1) .ts에 이렇게 써줌



2) html에 이렇게 써줌


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


3) 결과





2)


1) .ts에 이렇게 써줌



2) 결과



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



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



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


*) .ts에 이렇게 써줌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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"];
  }
}
cs


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


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


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


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

this.address = {

like: "apple",

streetNumber: "50"

}

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







constructor()와 ngOnInit()의 차이




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

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

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


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


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