Angular 내장 지시문

목표: 이 기사에서는 Angular의 기본 제공 지시문을 사용하여 뷰의 모양을 변경합니다.

전제 조건 이 문서를 완료하기 전에 Visual Studio Code, NPM(노드 패키지 관리자), Node, Angular CLI를 포함한 모든 전제 조건 도구를 이미 설치해야 합니다.

설정

로컬 컴퓨터에서 Visual Studio Code를 엽니다.

파일 메뉴로 이동하여 폴더 열기 옵션을 선택합니다.

이 연습을 위한 새 프로젝트를 만들고 이 폴더를 선택합니다.

새 프로젝트 만들기 명령: ng new angular-medium

새 프로젝트 만들기: Ctrl + backtic(`) 키로 터미널을 연 다음 새 각도-중간 명령 실행

환경 부트스트랩

Visual Studio Code에서 Ctrl + 백틱(`) 키를 누르고 터미널에서 열기 옵션을 선택합니다.

npm을 사용하여 angular-medium 프로젝트를 실행합니다.

npm start

이제 여기에서 프로젝트를 볼 수 있습니다. 이것은 기본 URL입니다.

http://localhost:4200/

원하는 포트에서 포트를 올바르게 시작하려면 다음을 사용하십시오.

npm start --port 8000 --open

AppComponent 클래스에 속성 추가

앱 폴더 내에서 app.component.ts 파일을 엽니다.

AppComponent 클래스 내에서 값이 true인 showPanel이라는 부울 유형의 새 속성을 추가합니다.

export class AppComponent {
    public showPanel : boolean = true;
}

3. AppComponent 클래스 내에서 getStyles라는 새 메서드를 추가합니다.

export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {

    }         
}

4. getStyles 메서드를 업데이트하여 다음 속성 및 값을 포함하는 JSON 개체를 반환합니다.

글꼴 두께: 굵게

글꼴 스타일: 기울임꼴

export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {
      return {
          'font-style': 'italic',
          'font-weight': 'bold'
      }
    }         
}

5. AppComponent 클래스 내에서 getClasses라는 새 메서드를 추가합니다.

export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {
      return {
          'font-style': 'italic',
          'font-weight': 'bold'
      }
    }  
    public getClasses() {

    }         
}

6. getClasses 메서드를 업데이트하여 다음 속성 및 값을 포함하는 JSON 개체를 반환합니다.

하이라이트: 참

스트라이크: 거짓

export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {
      return {
          'font-style': 'italic',
          'font-weight': 'bold'
      }
    }  
    public getClasses() {
      return {
          'highlight': true,
          'strike': false
      }
    }         
}

CSS 스타일 만들기

app/views 폴더 내에서 app.component.html 파일을 엽니다.

스타일 요소 내에서 background-color를 노란색으로 설정하고 app.component.css 파일에 더 많이 설정하는 highlight라는 CSS 클래스를 추가합니다.

.highlight {
    background-color: yellow;
}
.text-green {
    color: green;
}
.text-red {
    color: red;
}
.bold{
    font-weight: 700;
}
.strike {
    text-decoration: line-through;
}

3.p 요소 내에서 for 속성이 showPanelCheck로 설정되고 콘텐츠 표시 패널?이 있는 새 레이블 요소를 만듭니다.

<p>
    <label for="showPanelCheck">Show Panel?</label>
</p>

4. p 요소 내에서 id가 showPanelCheck로 설정되고 type이 checkbox로 설정된 새 입력 요소를 만듭니다.

<p>
    <label for="showPanelCheck">Show Panel?</label>
    <input id="showPanelCheck" type="checkbox" />
</p>

5. 모델을 구성 요소 클래스의 showPanel 속성으로 설정하여 입력 요소를 업데이트합니다.

<p>
    <label for="showPanelCheck">Show Panel?</label>
    <input id="showPanelCheck" type="checkbox" [(ngModel)]="showPanel" />
</p>

6. 콘텐츠 패널이 표시된 새 p 요소를 만듭니다. ngIf 지시문을 사용하고 구성 요소 클래스의 showPanel 속성에 바인딩하여 p 요소를 업데이트합니다.

<p *ngIf="showPanel">
   Dummy Panel is Shown
</p>

7. Custom Classes 콘텐츠로 새 p 요소를 만듭니다. ngClass 지시문을 사용하고 구성 요소 클래스의 getClasses 메서드에 바인딩하여 p 요소를 업데이트합니다.

<p [ngClass]="getClasses()">
    Dummy Custom Classes
</p>

8. 콘텐츠 패널이 표시된 새 p 요소를 만듭니다. ngStyle 지시문을 사용하고 구성 요소 클래스의 getStyles 속성에 바인딩하여 p 요소를 업데이트합니다.

<p [ngStyle]="getStyles()">
    Dummy Custom Styles
</p>

9. 때때로 백엔드에서 오는 플래그가 거의 없으며 다음과 같은 방법을 사용합니다.

또 다른 예

<div [ngClass]="clinicStatusClass()">
    Emergency
</div>
<div [ngStyle]="patientInfoStyle()">
    Patient Allergy
</div>

app.component.ts

clinicStatusClass() {
  if (this.patientConsultation.ClinicTypeText !== 'Emergency') {
    return ['text-green', 'bold']
  } else if (this.patientConsultation.ClinicTypeText === 'Emergency') {
    return ['text-red', 'bold']
}
return []
}
patientInfoStyle(): any {
  return { display: 'block', margin: '0 7px', 'min-height': '215px', width: '100%' }
 }

산출