Angular 角度2为厄运添加奇怪属性

我是新来的

我正在尝试创建一个登录页面。我有一个应用程序组件

@Component({
    selector: 'pm-app',
    template: `
    <div>
            <router-outlet></router-outlet>
     </div>
     `,
     styleUrls:["app/app.component.css",]
})
export class AppComponent {
    pageTitle: string = 'default';
}

当我在浏览器中运行页面时，我似乎给doom中的每个元素添加了奇怪的属性，例如（_ngcontent-ehi，_nghost-ehi…）

厄运中的那些属性是什么？为什么“login.component.css”内联在页面中，而角色也有奇怪的属性

---

感谢您的帮助

添加这些属性以模拟样式封装。此外，添加到组件的样式的选择器也会被重写，以仅匹配这些属性

---

如果您将

封装

或

@Component（）

更改为

视图封装。无

或

视图封装。本机

将不使用这些属性，也不会重写样式选择器。

简而言之，Angular对DOM做了一些事情。。。阅读下面的链接了解更多信息

“Angular必须确保组件的样式选择器只匹配此特殊组件，而不匹配页面上的其他内容。这就是它扩展CSS选择器的原因，因此它们具有更高的特异性，并且不会与以前定义的其他选择器发生冲突。当然，要使这些选择器真正匹配，模板中的元素也需要扩展。这就是为什么我们会看到所有这些

\ngcontent-*

和

\nghost-*

属性。” ~

---

还有大量关于Angular是如何以及为什么要这样做的信息。

谢谢，封装：viewEngularation。组件返回错误中没有任何信息：找不到名称viewEngulario，知道原因吗？您需要从

@Angular/core

导入它。有关示例，请参阅

  @Component({
        templateUrl: 'app/home/login.component.html',
        styleUrls: ["app/home/login.component.css"]
    })
    export class LoginComponent {
    }

<pm-app _nghost-ehi-1="">
    <div _ngcontent-ehi-1="">
            <router-outlet _ngcontent-ehi-1=""></router-outlet><ng-component _nghost-ehi-3="">    <div _ngcontent-ehi-3="" class="formWrapper">
            <div _ngcontent-ehi-3="" class="formLogo"></div>
            <div _ngcontent-ehi-3="" class="welcome">
                <h4 _ngcontent-ehi-3="">Welcome</h4>
                <h4 _ngcontent-ehi-3="">Please signin</h4>
            </div>
            <form _ngcontent-ehi-3="" class="loginForm">
                <input _ngcontent-ehi-3="" placeholder="Username" type="text">
                <input _ngcontent-ehi-3="" placeholder="Password" type="text">
                <div _ngcontent-ehi-3="" class="cbxWrap"><input _ngcontent-ehi-3="" id="cbx1" value="rememberCbx" type="checkbox"><label _ngcontent-ehi-3="" class="cbxlbl" for="cbx1">remember me</label></div>
                <input _ngcontent-ehi-3="" value="Login" type="button">
            </form>
            <div _ngcontent-ehi-3="" class="forgetPass">
                <span _ngcontent-ehi-3="" style="float:left;margin-top:6px;">forgot password?</span>
                <span _ngcontent-ehi-3="" style="float:right"><img _ngcontent-ehi-3="" src="/app/assets/images/ezmanage-draft-v7_07.jpg"></span>
            </div>
            <div _ngcontent-ehi-3="" class="clear"></div>
        </div>
        <div _ngcontent-ehi-3="" class="clear"></div>

    </ng-component>
     </div>
     </pm-app>

body[_ngcontent-amn-3] {
    background: #2d323f none repeat scroll 0 0;
}
    .loginForm[_ngcontent-ehi-3] input[type="button"][_ngcontent-ehi-3], .loginForm[_ngcontent-ehi-3] input[type="text"][_ngcontent-ehi-3] {
        border: 1px solid #888888;
        color: #888888;
        display: block;
        margin: 1em auto 0;
        padding: 1em 3%;
        text-transform: capitalize;
        width: 94%;
    }