一、输入属性
app TS
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'myng';
stock: string;
}
app HTML
<div>我是父组件</div>
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>
Order TS
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
@Input()
stockCode: string;
@Input()
amount: number;
constructor() {
setInterval(() => {
this.stockCode = 'Apple';
}, 3000);
}
ngOnInit(): void {
}
}
4.order HTML
<div>
我是子组件!
</div>
<div>我要买{{amount}}手的{{stockCode}}股票!</div>