Css 通过ComponentPortal渲染角度为10的零部件，而不使用其包装标记

我试图用Angular渲染的项目来扩充导航栏。我们从以下几点开始：

渲染服务器端：

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto" id="navbarOutlet">
        <li class="nav-item">
            <a class="nav-link" href="/foo">Foobar</a>
        </li>
    </ul>
</div>

navbar.component.html

<li class="nav-item">
    <a class="nav-link" [routerLink]="['/dashboard']">Dashboard</a>
</li>

只要组件确实在

#navbroutlet

中呈现，这就可以工作，但是由于

navbar.component

的包装标签会妨碍，引导的CSS规则不适用：

<ul class="navbar-nav mr-auto" id="navbarOutlet">
  <div _nghost-hgg-c28="" app-navbar="">
    <li _ngcontent-hgg-c28="" class="nav-item">
      <a _ngcontent-hgg-c28="" ng-reflect-router-link="/dashboard" href="/dashboard">Dashboard</a>
    </li>
  </div>
</ul>

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector,
    private appRef: ApplicationRef
  ) {}

  private portalOutlet: DomPortalOutlet;
  private portal: ComponentPortal<NavbarComponent>;

  ngOnInit(): void {
    this.portalInit();
  }

  portalInit() {
    const hostEl = document.querySelector('#navbarOutlet');

    // clear it
    while (hostEl.firstChild) {
      hostEl.firstChild.remove();
    }

    // Create an outlet from a DOM element
    this.portalOutlet = new DomPortalOutlet(
      hostEl,
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );

    // Locate the component factory for the NavbarComponent
    this.portal = new ComponentPortal(NavbarComponent);

    // Attach portal to host
    this.portalOutlet.attach(this.portal);
  }
}

<ul class="navbar-nav mr-auto" id="navbarOutlet">
  <div _nghost-hgg-c28="" app-navbar="">
    <li _ngcontent-hgg-c28="" class="nav-item">
      <a _ngcontent-hgg-c28="" ng-reflect-router-link="/dashboard" href="/dashboard">Dashboard</a>
    </li>
  </div>
</ul>

<ul class="navbar-nav mr-auto" id="navbarOutlet">
    <li _ngcontent-hgg-c28="" class="nav-item">
      <a _ngcontent-hgg-c28="" ng-reflect-router-link="/dashboard" href="/dashboard">Dashboard</a>
    </li>
</ul>