Angular - 使用 ID 的组件选择器

标签 angular

我想为组件选择器使用元素 ID,但它不起作用。

这在 Angular 中是不允许的吗?如果是,为什么不呢?

(所以 .btnAction 的选择器匹配,并且按钮被插入到组件 1 的模板中,但 #btnAction 没有)

我不确定这是必要的,但这是我确认其他 CSS 选择器有效(如类和属性)但 ID 无效的代码。

组件 1

@Component({
    selector: 'myelement',
    template: `<div id="btnAction" class="btnAction"></div>`,
    directives: [ActionBtn]
})

组件 2

@Component({
    selector: '#btnAction',
    template: `<button>{{btnTitle}}</button>`
})

最佳答案

是的!!!

angular 2+ 也支持 ID 选择器。 我们可以使用元素、类或 id。下面是可以工作的代码。

  1. 使用 id 选择器

@Component({ 选择器:'[id=idname]', templateUrl: '模板路径', styleUrls: ['css 路径'] })

  1. 使用类选择器

@Component({ 选择器:'.classname',//或'[class=classname]' templateUrl: '模板路径', styleUrls: ['css 路径'] })

  1. 使用元素选择器

@Component({ 选择器:'元素名称' templateUrl: '模板路径', styleUrls: ['css 路径'] })

关于Angular - 使用 ID 的组件选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42985942/

相关文章:

html - 具有可调多列的 Angular 下拉

html - bootstrap 4 + angular 中的正文和内容 div 高度 100

Angular2 将 CSS 类设置为组件变量值

javascript - Angular2 ngFor 不工作

javascript - 使图像适合屏幕并允许默认缩放行为

angular - 单击按钮时选择所有行

angular - 如何在 Angular 标记中进行空/未定义的安全字符串比较?

javascript - 在不改变输入的情况下触发管道重载

angular - 如何在 Angular 库中将依赖项声明为可选?

javascript - 类型 'includes' -angular2 中缺少属性 'Subscription'