javascript - 如何删除呈现的 html 中的路由器导出标签？

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> (和其他类似的)标签？

---

注意。我是 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() 选择器排除模板中的元素。