각도 구성 요소

8849 단어 angular component directive

목표: 이 기사에서는 구성 요소를 알게 됩니다.

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

요소

구성 요소 생성

모듈에 등록

HTML 마크업에 요소 추가

목표 및 결과

처음에는 Angular 애플리케이션에 첫 번째 구성 요소를 추가하고 해당 템플릿을 업데이트합니다. 이 문서를 마치면 다음을 수행할 수 있습니다.

Angular 응용 프로그램에 구성 요소 추가

구성 요소의 템플릿을 업데이트합니다.

메뉴 구성 요소 추가

일부 PNG 파일이 포함된 몇 개의 이미지 폴더를 Angular 프로젝트src/assets 폴더로 이동합니다. 이 이미지 파일은 연습에 유용합니다.

그런 다음 CLI의 ng generate 명령을 사용하여 다음과 같이 menu라는 새 구성 요소를 생성합니다.ng generate component menu

이렇게 하면 menu라는 폴더에 메뉴 구성 요소에 필요한 파일이 생성되고 이 구성 요소도 app.module.ts로 가져옵니다.

그런 다음 app.component.html 파일을 열고 도구 모음 뒤에 다음을 추가합니다.

<app-menu></app-menu>

메뉴 만들기

그런 다음 src/app 폴더 아래에 shared라는 폴더를 만듭니다. 이 폴더에 다음 코드를 사용하여 dish.ts라는 파일을 추가합니다.

export class Dish {
    id: string;
    name: string;
    image: string;
    category: string;
    featured: boolean;
    label: string;
    price: string;
    description: string;
}

다음과 같이 업데이트menu.component.ts하여 4개의 메뉴 항목에 대한 데이터를 추가합니다.

import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  dishes: Dish[] = [
    {
      id: '0',
      name: 'Uthappizza',
      image: '/assets/images/uthappizza.png',
      category: 'mains',
      featured: true,
      label: 'Hot',
      price: '4.99',
      // tslint:disable-next-line:max-line-length
      description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'
    },
    {
      id: '1',
      name: 'Zucchipakoda',
      image: '/assets/images/zucchipakoda.png',
      category: 'appetizer',
      featured: false,
      label: '',
      price: '1.99',
      description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'
    },
    {
      id: '2',
      name: 'Vadonut',
      image: '/assets/images/vadonut.png',
      category: 'appetizer',
      featured: false,
      label: 'New',
      price: '1.99',
      description: 'A quintessential ConFusion experience, is it a vada or is it a donut?'
    },
    {
      id: '3',
      name: 'ElaiCheese Cake',
      image: '/assets/images/elaicheesecake.png',
      category: 'dessert',
      featured: false,
      label: '',
      price: '2.99',
      description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'
    }
   ];

  constructor() { }

  ngOnInit(): void {
  }

}

다음으로 menu.component.html 템플릿을 다음과 같이 업데이트합니다.

<div class="container">
    <div class="row">
        <div class="card col" *ngFor="let dish of dishes">
            <img src="{{dish.image}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{dish.name}}</h5>
              <p class="card-text">{{dish.description}}</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
    </div>
</div>

다음으로 app.module.ts를 열고 다음과 같이 업데이트합니다.

import { MenuComponent } from './menu/menu.component';

@NgModule({
  declarations: [       
    AppComponent,
    MenuComponent
   ]
})

산출

선택한 이미지

menu.component.html

<div class="container">
    <div class="row">
        <div class="card col" *ngIf="selectedDish">
            <img src="{{selectedDish.image}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{selectedDish.name | uppercase}}</h5>
              <p class="card-text">{{selectedDish.description}}</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
    </div>
</div>

menu.component.ts

import { Component, OnInit, DebugElement } from '@angular/core';
import { Dish } from '../shared/dish';

const DISHES: Dish[] = [
  {
    id: '0',
    name: 'Uthappizza',
    image: '/assets/images/uthappizza.png',
    category: 'mains',
    featured: true,
    label: 'Hot',
    price: '4.99',
    // tslint:disable-next-line:max-line-length
    description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'
  },
  {
    id: '1',
    name: 'Zucchipakoda',
    image: '/assets/images/zucchipakoda.png',
    category: 'appetizer',
    featured: false,
    label: '',
    price: '1.99',
    description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'
  },
  {
    id: '2',
    name: 'Vadonut',
    image: '/assets/images/vadonut.png',
    category: 'appetizer',
    featured: false,
    label: 'New',
    price: '1.99',
    description: 'A quintessential ConFusion experience, is it a vada or is it a donut?'
  },
  {
    id: '3',
    name: 'ElaiCheese Cake',
    image: '/assets/images/elaicheesecake.png',
    category: 'dessert',
    featured: false,
    label: '',
    price: '2.99',
    description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'
  }
]

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  dishes: Dish[] = DISHES;
  selectedDish = DISHES[0];

  constructor() { }

  ngOnInit(): void {
  }

}