本篇文章給大家分享的是有關(guān)angular中怎么實(shí)現(xiàn)輸入與輸出，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
組件的輸入
angular允許使用兩種形式來定義組件的輸入，一種是在裝飾器@Component中使用inputs來定義，另一種是使用@Input來定義。
inputs
首先先介紹在裝飾器中使用的輸入。inputs接收的是一個(gè)字符串?dāng)?shù)組，用來指定我們輸入的鍵名。
重慶分公司
重慶分公司
@Component({
selector: 'my-component',
inputs: ['name']
})
class MyComponent {
name: string;
}name就會對應(yīng)我們組件中的name變量。
然后我們定義一個(gè)組件，當(dāng)然不可避免有的時(shí)候會在其他的組件的模板中使用，所以就可以這樣寫。
上級組件：
export class AppComponent {
myName = 'zhangsan';
...
}上級組件的模板：
方括號[]：數(shù)據(jù)綁定，也叫輸入綁定。將等號右邊的變量綁定在左邊[]中的變量上。
我們的組件：
@Component({
selector: 'app-messages',
inputs: ['name'],
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
name: string;
}這里我們就用name接受了上級組件的myName。
通過上面的圖，就很容易看輸入數(shù)據(jù)的對應(yīng)關(guān)系。
然后我們打印一下看看變量是否成功輸入了。
export class MessagesComponent implements OnInit {
name: string;
ngOnInit() {
console.log(this.name);
}
}
成功輸入！
@Input
上面我們實(shí)現(xiàn)了組件的數(shù)據(jù)輸入，但是angular并沒有滿足現(xiàn)狀，還提供另外一種輸入的方法，就是@Input。
@Component({
selector: 'my-component'
})
class MyComponent {
@Input() name: string;
}只要在我們的組件中定義變量的時(shí)候使用@Input裝飾器就行了。對比上面我們使用inputs時(shí)，少了一個(gè)二次聲明。這種方法感覺數(shù)據(jù)的傳遞少了一層關(guān)系，更加易于理解，而且代碼也更加的工整。
組件輸出
說完了組件的輸入，下面我們就該聊聊組件的輸出了。要將數(shù)據(jù)從組件中傳遞出去，就要使用輸出綁定。
圓括號(): 事件綁定，又叫輸出綁定。這里我們監(jiān)聽click事件，然后觸發(fā)display方法。
除了click，angular還有很多內(nèi)置的事件，當(dāng)然，我們在編寫自己的組件的時(shí)候，也可以自定義一個(gè)事件，來與外部通信。
自定義事件
自定義的事件需要做三件事情：
1.在@Component配置中，制定outputs配置項(xiàng)
2.在配置的屬性中，設(shè)置一個(gè)EventEmitter（事件觸發(fā)器）
3.在適當(dāng)?shù)臅r(shí)候，也就是要觸發(fā)的方法中，通過EventEmitter觸發(fā)事件
下面看一下示例：
@Component({
selector: 'my-component',
outputs: ['newEvent']
})
export class MyComponent {
newEvent: EventEmitter;
constructor() {
this.newEvent = new EventEmitter();
}
display(): void {
this.newEvent.emit("test event");
}
} 然后我們就可以通過上面模板中的代碼實(shí)現(xiàn)輸出了。
如果想在一個(gè)父級的組件中使用這個(gè)輸出，就要使用我們自己的事件了。下面看一個(gè)示例：
父級組件：
export class AppComponent {
...
showEvent(message: string) {
console.log(`hello: ${message}`);
}
}父級模板：
我們的組件：
@Component({
selector: 'app-messages',
outputs: ['newEvent'],
templateUrl: './messages.component.html'
})
export class MessagesComponent {
newEvent: EventEmitter;
constructor(private messageService: MessageService) {
this.newEvent = new EventEmitter();
}
display(): void {
this.newEvent.emit('test event');
}
} 我們的組件模板：
