使用 css 类选择器通过角度组件传递输入属性

Question

我有一个带有类选择器的组件。 弹出窗口是带有 CSS 类选择器".popup"的组件

<div class="popup">
My Content
</div>

我想传递一些输入和输出属性，例如，就像普通组件选择器一样

<div class='popup' [open]="open" (afterclose)="afterclose">
</div>

但是我得到错误 -Can't bind to 'open' since it isn't a known property of 'div'.

我的组件：-

@Component({
selector: '.popup',
templateUrl: './popup.component.html',
styleUrls: ['./popupx.component.scss']
})
export class PopupComponent {
@Input() open:boolean;
@Output() afterClose: EventEmitter<any> = new EventEmitter();
}

我们如何才能做到这一点？

Answer 1

因为您尝试将数据发送到div。 命名组件并向其传递数据，例如：

<popup [open]="open"></popup>

Answer 2

不要创建弹出组件，而是创建一个弹出指令并在 DIV 上使用它。然后，您将能够使用定义的输入和输出。