步骤:
- 设置一个变量,将其用
ViewChild装饰,
- 将该变量的类型设定为被引用组件的类名(class 后面的那个单词),如注释B中所释代码
- 调用该变量,采用变量名+“." 的方式调用该变量内的方法,如注释C中所释代码。
import {Component, OnInit, ViewChild} from "@angular/core";
import {FormComponent} from "../../../../core/_component/form.component";
import {EntityFormComponent} from "../../../../core";
@Component({
selector: 'app-set-password',
template: `
<div #passWordForm
class="tab-pane app-entity-form" <!--A:app-entity-form为被引用的组件-->
>
</div>
<ng-template #pwdBtnGroupTemplate>
<button type="button" class="btn btn-primary"
(click)="$onSubmitPwd($event);">保存
</button>
</ng-template>
`
})
export class SetPasswordComponent extends FormComponent implements OnInit{
@ViewChild('pwdBtnGroupTemplate')
pwdBtnGroup: TemplateRef<any>;
@ViewChild('passWordForm')
passWordForm: EntityFormComponent;//B:将该被引用组件定义为一个变量
constructor() {
}
ngOnInit() {
}
$onSubmitPwd($event) {
this.passWordForm && this.passWordForm.$onSubmit($event); // C:调取被引用组件内的方法
}
}
//被引用组件
export class EntityFormComponent extends FormComponent implements OnInit, OnChanges {
constructor() {
}
$onSubmit($event?) {
console.log($event);
}
}