使用 css 类选择器在角度组件上传递输入属性答案

【问题标题】：Passing input properties over angular component with css class selector使用 css 类选择器在角度组件上传递输入属性
【发布时间】：2019-02-16 05:15:21
【问题描述】：

我有一个带有类选择器的组件。 popup 是带有 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();
}

我们怎样才能做到这一点？

【问题讨论】：

标签： angular5 angular-components angular2-components

【解决方案1】：

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

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

【讨论】：

我不想要这种方式，我已经知道了，我想把它当作一个类来使用。
请看选择器——选择器：'.popup'，

【解决方案2】：

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

【讨论】：

谢谢，我会试试的。