Question

出于某种原因 Angular 2 会插入这些placeholder tags（因为缺少更好的词），例如router-outlet

换句话说，对于这样的基本 app.component.ts ：

import { Component } from '@angular/core';

@Component({
    selector   : 'app-root',
    templateUrl: './app.component.html',
    styleUrls  : ['./app.component.css']
})
export class AppComponent
{
}

此html输出在浏览器中呈现：

<router-outlet>
  Component rendered html content...
</router-outlet>

OR

<app-root>
  Component rendered html content...
</app-root>

而不是直接在html中插入组件内容，如下所示：

<p>Component rendered html content...</p>

修改

router-outlet标签的存在阻止我的css规则应用于（甚至匹配）组件内部html标签

有没有办法可以改变这种行为并摆脱<app-route>（和其他类似的）标签？

NB。我是Angular 2的新手

Answer 1

进入styles.css文件：

 :host /deep/ router-outlet{
//here you put your <p> css code for router-outlet
        display: block;
        border: 10px solid black;
    }
     :host /deep/ app-root{
//here you put your <p> css code for app-root
        display: block;
        border: 10px solid black;
    }

如果你添加的某些规则没有看到它被应用，请在规则中添加！important：

border: 10px solid black !important;

作为额外的：

:host /deep/ router-outlet + *:not(nav) {
   width:80%;
   float:right;
}

：not（）选择器排除模板中的元素。

如何删除渲染的html中的router-outlet标记？

修改

1 个答案: