기본 설명

구성 요소는 Angular에서 매우 중요한 것으로 템플릿을 가진 지령이며 Angular 응용의 기초와 핵심을 구성하고 특정한 기능을 포장하는 데 사용되며 응용 프로그램의 질서정연한 운행은 구성 요소 간의 협동 작업에 의존한다.

사용자 정의 구성 요소

만약 현재 한 열의 데이터가 있다면 ul과 li 탭을 사용하여 표시해야 합니다. ui-show 탭을 사용자 정의할 수 있습니다. 구성 요소 코드는 다음과 같습니다. (코드는 show.component.ts에 있습니다.)

import { Component } from '@angular/core';
            
@Component({
            
    selector: 'ui-show',
            
    template: 'ID:{{row.id}}  INFO:{{row.info}}',
            
    styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]
            
})
export class ShowComponent {
            
    dataList = [
        { id: 1, info: "Angular" },
        { id: 2, info: "React" },
        { id: 3, info: "Vue" }
    ];
            
}

이 때 구성 요소가 정의되었습니다. 사용할 수 있도록 모듈 (예를 들어 루트 모듈 app.module.ts) 에 다음과 같이 도입해야 합니다. (설명할 필요가 없는 코드를 삭제했습니다.)

import { NgModule } from '@angular/core';
            
import { ShowComponent } from './show.component';
            
@NgModule({
            
    declarations: [
        ShowComponent
    ]
                
})
......

이제 그 데이터를 표시하기 위해 ui-show 탭을 사용할 수 있습니다.

template 및 templateUrl 옵션

html 템플릿은 위의 예에서 구성 요소 파일에 직접 쓴 것 외에 다음과 같은 것도 할 수 있습니다.

templateUrl:'./show.component.html'

이렇게 구체적인 틀이 있다.html 파일에서 개발하여 유지보수가 쉽고 템플릿이 복잡하면.

styles 및 styleUrls 옵션

스타일 파일도 마찬가지로 위에서 styles 옵션을 사용하여 어셈블리 파일에 직접 작성할 수 있습니다.

styleUrls:['./show.component.css']

이렇게css 파일에서 개발 양식은 비교적 쓰기 쉽다.
위의 세 가지는 흔히 볼 수 있는 옵션으로 비교적 간단하고 자주 사용된다. 이외에 선택할 수 있는 옵션이 많으니 다음에 다시 설명하자.

라이프 사이클 갈고리

구성 요소 (물론 명령 포함) 의 실례는 하나의 생명주기가 있는데, Angular는 갈고리를 제공하여 개발자가 필요한 시기에 미리 정의한 방법을 터치할 수 있도록 한다. 이를 생명주기 갈고리 인터페이스라고 한다.다음은 이러한 갈고리의 순서입니다.
주의해야 할 것은 이 갈고리들을 모두 실현하는 방법이 필요하지 않을 뿐만 아니라, 이 갈고리들도 항상 효과가 있는 것은 아니며, 어떤 것은 구성 요소에서 정의해야만 의미가 있다.

어떻게 사용합니까?

예를 들어 ngOnInit()라는 갈고리를 사용해 초기화할 때 뭔가를 처리하려면 다음과 같이 할 수 있다.

......

export class ShowComponent implements OnInit{

    ......

    ngOnInit() {
        //todo
    }

}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Angular 시리즈 학습 2: 기본 구성 요소 설명, 사용자 정의 구성 요소 및 세부 사항 설명

구성 요소는 Angular에서 매우 중요한 것으로 템플릿을 가진 지령이며 Angular 응용의 기초와 핵심을 구성하고 특정한 기능을 포장하는 데 사용되며 응용 프로그램의 질서정연한 운행은 구성 요소 간의 협동 작업에...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다