또 다른 Angular 기사, 부품 구성 요소 생성

이전 글에서는 프로젝트 생성에 대해서만 이야기했습니다. 즉, 하위 프로젝트가 아닌 메인 프로젝트입니다. 이에 대한 내용은 향후 기사의 주제가 될 것입니다.

오늘은 컴포넌트 생성과 관련된 내용입니다. 프로젝트 생성과 마찬가지로 Angular CLI는 가장 친한 친구입니다. 그러니 다음과 같이 하세요:

 
ng 구성요소 hello-world 생성

my-new-project/src/app/hello-world 폴더에서 4개 파일로 코드 생성을 실행합니다.

• hello-world.comComponent.html: 템플릿
• hello-world.comComponent.scss : 프로젝트 생성 프롬프트에서 내가 선택한 스타일이므로 scss 형식입니다.
• hello-world.comComponent.spec.ts : 테스트 파일
• hello-world.comComponent.ts : 구성요소

이제 ng Serve를 실행하고 브라우저에서 localhost:4200을 열어 결과를 확인하세요
안녕하세요, 그런데 구성요소가 렌더링되지 않았습니다! 왜?
우리는 그것을 사용하지 않았기 때문에 :-)

이제 루트 구성요소 'app.comComponent.ts'를 열고 'imports' 섹션에 HelloWorlComponent를 추가하세요.

이제 AppComponent에서 해당 구성 요소를 사용할 수 있습니다. hello-world.comComponent.html 파일을 편집하고 모든 코드를 다음과 같이 바꾸세요.

예를 들어 프로젝트 생성 시 Angular Router 설치를 방지하지 않았으므로 라우터 출력은 잊어버리세요(라우팅을 원하지 않는 경우 다음을 수행할 수 있습니다: ng new my-new-project --routing=false )

기본 선택기 접두사는 'app'이므로 구성 요소의 선택기는 'app-hello-world'입니다.

브라우저를 확인하면 구성 요소의 기본 콘텐츠가 표시됩니다.

hello-world.comComponent.scss에 다음을 추가하여 CSS를 맞춤설정할 수 있습니다.

브라우저를 확인하면 텍스트의 새로운 색상을 볼 수 있습니다. :host 선택기는 현재 hello-world 구성요소와 관련되어 있습니다.

이제 간단한 구성요소를 생성하는 방법을 알았습니다

좋은 하루 보내세요 ?

[원본 게시물] https://rebolon.medium.com/yet-another-angular-article-part-2-comComponents-creation-550c14b991a2

위 내용은 또 다른 Angular 기사, 부품 구성 요소 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!