06 동적 컴포넌트(Dynamic Component) 03

AdComponent 인터페이스

광고 배너에서 모든 컴포넌트는 공통 AdComponent 인터페이스를 구현하여 API를 표준화하여 데이터를 컴포넌트로 전달합니다.

다음은 두 가지 샘플 컴포넌트와 참조 용 AdComponent 인터페이스입니다.

src/app/hero-job-ad.component.ts

import { Component, Input } from '@angular/core';   import { AdComponent }      from './ad.component';   @Component({   template: `     <div class="job-ad">       <h4>{{data.headline}}</h4>             {{data.body}}     </div>   ` }) export class HeroJobAdComponent implements AdComponent {   @Input() data: any;   }

 

src/app/hero-profile.component.ts

import { Component, Input }  from '@angular/core';   import { AdComponent }       from './ad.component';   @Component({   template: `     <div class="hero-profile">       <h3>Featured Hero Profile</h3>       <h4>{{data.name}}</h4>             <p>{{data.bio}}</p>         <strong>Hire this hero today!</strong>     </div>   ` }) export class HeroProfileComponent implements AdComponent {   @Input() data: any; }

 

src/app/ad.component.ts

export interface AdComponent {   data: any; }

 

최종 광고 배너

최종 광고 배너는 다음과 같습니다.

라이브 예제 / 다운로드 예제를 참조하십시오.