Explication détaillée des propriétés d'entrée et des propriétés de sortie d'Angular4

Cet article présente principalement les attributs d'entrée et les attributs de sortie d'Angular4. Il analyse en détail les concepts, les fonctions et les compétences d'utilisation associées des attributs d'entrée et de sortie d'Angular4 sous forme d'exemples. J'espère que cela pourra aider tout le monde.

Attributs d'entrée Angular4

Les attributs d'entrée sont généralement utilisés pour transmettre des informations des composants parents aux composants enfants

Par exemple : nous transmettons le code boursier du composant parent à l'enfant composant, ici nous appelons le composant enfant app-order

Déclarons d'abord la valeur qui doit être transmise à partir du composant parent dans app.order.component.ts

order.component.ts

...
@Input()
stockCode: string
@Input()
amount: string
...

order.component.html

<p>这里是子组件</p>
<p>股票代码为{{stockCode}}</p>
<p>股票总数为{{amount}}</p>

Ensuite, nous devons transmettre la valeur au composant enfant dans le composant parent (app.component)

app.component.ts

...
stock: string
...

app.component.html

<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

Ici nous utilisons la liaison de données bidirectionnelle d'Angular, lions la valeur saisie par l'utilisateur au stock dans le contrôleur. Ensuite, il est transmis au sous-composant, et le sous-composant l'affiche sur la page après l'avoir reçu.

Attributs de sortie Angular4

Les attributs de sortie sont nécessaires lorsqu'un composant enfant doit transmettre des informations au composant parent.

Par exemple : lorsque nous obtenons le prix en temps réel d'une action en bourse, nous espérons que cette information pourra également être obtenue de l'extérieur. Pour plus de commodité, le cours de l’action en temps réel est ici simulé par un nombre aléatoire. Nous appelons ici le sous-composant app.price.quote

Utilisez EventEmitter pour émettre des événements à partir du sous-composant

price.quote.ts

export class PriceQuoteComponent implements OnInit{
 stockCode: string = 'IBM';
 price: number;
 //使用EventEmitter发射事件
 //泛型是指往外发射的事件是什么类型
 //priceChange为事件名称
 @Output()
 priceChange:EventEmitter<PriceQuote> = new EventEmitter();
 constructor(){
  setInterval(() => {
   let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
   this.price = priceQuote.lastPrice;
   //发射事件
   this.priceChange.emit(priceQuote);
  })
 }
 ngInit(){
 }
}
//股票信息类
//stockCode为股票代码，lastPrice为股票价格
export class PriceQuote{
 constructor(public stockCode:string,
    public lastPrice:number
 )
}

price.quote.html

<p>
 这里是报价组件
</p>
<p>
 股票代码是{{stockCode}}
</p>
<p>
 股票价格是{{price | number:'2.2-2'}}
</p>

Ensuite, nous recevons les événements dans le composant parent

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<p>
 这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}，
 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}
</p>

Liaison d'événement et événements natifs La liaison est le pareil, en mettant le nom de l'événement entre ().

app.component.ts

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote('', 0);
 priceQuoteHandler(event:PriceQuote){
  this.priceQuote = event;
 }
}

Le type d'événement ici est le type d'événement transmis par le sous-composant.

Pour faire simple, le composant enfant émet l'événement priceChange via submit et transmet la valeur. Lorsque le composant parent utilise le composant enfant, il déclenchera l'événement priceChange et recevra la valeur.

Recommandations associées :

Opérations de préparation de projet et de création d'environnement dans Angular4

Exemple de code de style CSS pour savoir comment afficher le contenu dans Angular4

Explication détaillée d'exemples de classe Router dans Angular4

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!