Question

我是角色2的新手。

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

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

并且还有登录组件

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

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

<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>

登录组件的CSS也似乎与奇怪的属性内联，也有一些css角色因为那些属性而无法正常工作。

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%;
    }

厄运中的那些属性是什么？为什么＆＃34; login.component.css＆＃34;在页面内嵌，角色也有奇怪的属性？

感谢您的帮助

Answer 1

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

如果您将encapsulation或@Component()更改为ViewEncapsulation.None或ViewEncapsulation.Native，则不会使用这些属性，也不会重写样式选择器。

Answer 2

简而言之，Angular会为DOM做一些事情......请阅读以下链接以获取更多信息。

“Angular必须确保组件的样式选择器仅匹配此粒子组件而页面上没有任何其他内容。这就是它扩展CSS选择器的原因，因此它们具有更高的特异性，并且不会与之前定义的其他选择器发生冲突当然，为了使这些选择器实际匹配，模板中的元素也需要扩展。这就是我们看到所有_ngcontent-*和_nghost-*属性的原因。“ 〜View Encapsulation in Angular 2

还有大量关于Angular如何以及为何在Angular 2 Architecture完成工作的信息。

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

2 个答案: