영웅 편집기

heroes 구성 요소 만들기

Angular의 명령은 다음과 같습니다.

ng generate component heroes
이것에 대응하는 ionic 커맨드는 아래와 같다.
ionic generate component heroes

실행해 보면 아래와 같이 heroes 폴더가 되어 있는 것을 알 수 있다.


heroes.component.ts가 아니라 heroes.ts라는 파일 이름으로 작성되는 것 같습니다.


CLI는 세 가지 메타 데이터 속성을 생성했습니다.

selector — 컴포넌트의 CSS 요소 선택기

templateUrl — 컴포넌트 템플릿 파일의 위치

styleUrls — 컴퍼넌트의 프라이빗 CSS 스타일의 위치

ionic으로 작성된 ts 파일에 styleUrls가 지정되지 않았습니다.
스스로 지정하지 않으면 안됩니까?
대답은 아니요.
htps : // 기주 b. 코 m / 이오니 c-테 아 m / 이오니 c-c / 이스에 s / 1196
조금 낡습니다만, 여기의 교환을 보는 한, ionic는 암시적으로 html등과 같은 계층에 있는 scss 파일을 빌드시에 받아들인 것 같습니다.
나중에 조금 시도해 봅시다.

여기의 Angular4 튜토리얼과 달리 일부 ionic에서는 변경할 부분이 있으므로 해설.
이론이나 이굴은 두고, 아래와 같이 설정해 보세요. (적선 부분을 주의해 보세요.)








여기까지 해주면 아래와 같이 표시된다고 생각합니다.


Angular4 튜토리얼에는 위의 변경 사항 중 app.module.ts에 대한 변경 사항이 포함되어 있지 않습니다. (이 페이지 뒤쪽에서 나옵니다)
거기에서는 다음과 같이 쓰여졌습니다.

응용 프로그램이 작동한 이유는 Angular CLI가 HeroesComponent를 생성했을 때 AppModule에서 해당 구성 요소를 선언했기 때문입니다.
src/app/app.module.ts를 열고 맨 위 근처에서 HeroesComponent를 가져온 것을 찾으십시오.

즉, ionic과 Angular CLI에서 동작이 다른가? (정말?) 네요.
라고는 해도 Angular 쪽에 동작이 통일되는 것 같은 생각도 하므로 일단 이 기사를 쓰고 있을 때의 ionic의 version을 실어 둡니다.

ionic-version
3.20.0

일단 길어졌기 때문에 여기까지.
다음 번에도 같은 장을 읽어 갑니다.