view引用自定义组件表单怎么关闭
时间: 2023-09-12 15:12:58 浏览: 44
要关闭自定义组件表单的视图引用,你可以使用以下两种方法之一:
1. 使用 ViewChild 选择器获取组件实例,并调用其 close 方法。例如:
```typescript
import { Component, ViewChild } from '@angular/core';
import { MyCustomComponent } from './my-custom.component';
@Component({
selector: 'app-my-view',
template: `
<my-custom #myCustom></my-custom>
<button (click)="closeCustomForm()">Close Form</button>
`
})
export class MyViewComponent {
@ViewChild('myCustom', { static: true }) myCustom: MyCustomComponent;
closeCustomForm() {
this.myCustom.close();
}
}
```
2. 在自定义组件中定义一个 Output 属性,当用户点击关闭按钮时触发该属性,然后在视图组件中订阅该属性并执行相应的操作。例如:
在自定义组件中:
```typescript
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-my-custom',
template: `
<div>Custom Form</div>
<button (click)="closeForm()">Close</button>
`
})
export class MyCustomComponent {
@Output() onClose = new EventEmitter<void>();
closeForm() {
this.onClose.emit();
}
}
```
在视图组件中:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-my-view',
template: `
<app-my-custom (onClose)="closeCustomForm()"></app-my-custom>
<button (click)="closeCustomForm()">Close Form</button>
`
})
export class MyViewComponent {
closeCustomForm() {
// 执行相应的操作
}
}
```