我需要將我的子組件中的一個變數傳遞給父頁面。 我試圖傳遞的這個變數是Barcode Scanner的陣列結果。
而且我需要把它傳遞給父頁面，以便把它發送到API。
childComponent.ts
this.consultList;
parentComponent.ts
export class ParentComponent 實作OnInit {
@Input() consultList: any[] = [] 。
testCall（）{
console.log('Test Consult: ', this.consultList;
}
uj5u.com熱心網友回復：
這里有一個例子stackblitz專案來測驗父子資料傳輸，使用@Input()和@Output()的機制
import { Component, EventEmitter, Input, Output } from '@angular/core'/span>;
@Component（{
selector: 'child',
template: `
<h1>你好 {{名字}}! 這是子組件</h1>。
<button (click)="sendEventToParent()">將資料發送到父級</button>。
`。
styles: [
`
h1 {
font-family: Lato;
}
`
]
})
export class ChildComponent {
@Input() name: string;
@Output() eventFromChild: EventEmitter<string> = new EventEmitter() 。
sendEventToParent（）。void {
this.eventFromChild.emit（'data from child'）。
}
這里是被稱為child的父組件的html
。<child name="{name }}" (eventFromChild)="onEvent($event)"> < /child>
<h1>這是父級組件</h1>
<p>{{dataFromChild}}</p>
像這樣的事件系結
和事件系結
import { Component, VERSION } from '@angular/core'/span>;
@Component（{
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular ' VERSION.major。
dataFromChild = ''。
onEvent（event）。void {
this.dataFromChild = event;
}
uj5u.com熱心網友回復：
你所想的被稱為一個抽象類。一個抽象類可以像介面一樣定義抽象屬性，像介面一樣定義抽象方法，而且與介面不同，它可以真正實作方法。你不能初始化一個抽象類，但是你可以繼承它的代碼以便重新使用。
https://codesandbox.io/s/patient-breeze-h4s3t?file=/src/index.ts
abstract class Parent {
abstract someProperty: string;
someCall（） {
console.log（this.someProperty）。
}
}
class ChildOne extends Parent {
someProperty = "我是孩子一"。
}
class ChildTwo extends Parent {
someProperty = "我是孩子二"。
}
const one = new ChildOne() 。
const two = new ChildTwo() 。
one.someCall(); // "我是孩子一";。
two.someCall(); / "I am child two";。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/307485.html
標籤：
上一篇：vue中缺少寬松的"angularjs"風格的運算式決議
下一篇：保存用戶的所有輸入