Question

我开始使用Angular 2（版本2.0.0-alpha.46）并创建一些组件。

使用以下代码创建组件时：

打字稿：

import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2';

@Component({
   selector: 'my-component'
})

@View({
     template: '<div class="myClass">Hello My component</div>'
 })

export class MyCompoent{
    constructor() {
        console.info('My Component Mounted Successfully');
    }
}

HTML：

<my-component></my-component>

它工作正常，但当我Inspect element时，我可以看到这样生成的标签：

输出HTML

<my-component>
    <div>Hello My component</div>
<my-component>

问题

它将<my-component>标记保留在HTML中，并且我的一些CSS无法按预期工作。

问题

有没有办法删除<my-component>标记，类似于角度1（指令中的replace: true）？

Answer 1

根据https://github.com/angular/angular/issues/3866，AngularJS 1.x中不推荐使用Replace，因为它似乎不是一个好主意。

作为一种解决方法，您可以在组件中使用属性选择器，如

<击>

selector: '[my-component]'

<击>

selector: '[myComponent]'

然后像

一样使用它

<击>

<div my-component>Hello My component</div>

<击>

<div myComponent>Hello My component</div>

<强>暗示

指令选择器应该是camelCase而不是snake-case。 Snake-case仅用于元素选择器，因为自定义元素需要-。 Angular并不依赖于作为自定义元素的组件，但无论如何，它都被认为是遵守此规则的良好实践。 Angular与camelCase属性一起正常工作，并将它们与所有指令（*ngFor，ngModel，...）一起使用，并且也由Angular样式指南建议。

Answer 2

引用Angular 1 to Angular 2 Upgrade Strategy doc：

Angular 2中不支持替换其主机元素的指令（替换：Angular 1中的true指令）。在许多情况下，这些指令可以升级到常规组件指令。

事实上，这取决于你想做什么，你需要知道Angular2支持几件事：

属性指令 - 请参阅https://angular.io/guide/attribute-directives
结构指令 - 请参阅https://angular.io/guide/structural-directives

根据您的想法，您可以选择不同的方法。对于您的简单示例，似乎@Günter解决方案更好; - ）

从HTML中删除/替换组件的选择器标记

2 个答案: