Question

在Angular2应用程序中，我使用Bootstrap的网格。模块的主要组件模板提供了一个网格行：

<div class="row">
    <router-outlet></router-outlet>
</div>

子组件有Bootstrap的网格列：

<div class="col-md-8">Hello, world!</div>
<div class="col-md-4"></div>

问题是Angular2生成了这样一个HTML：

<div class="row">
    <router-outlet></router-outlet>
    <ng-component>
        <div class="col-md-8">Hello, world!</div>
        <div class="col-md-4"></div>
    </ng-component>
</div>

所以：它添加了一个 ng-component 标记，它打破了Bootstrap所需的结构（列块必须是行块的子节点）。

如何阻止生成 ng-component 标记？

Answer 1

这是因为.row类而发生的。它具有display:flex的属性，它是flex项的容器。

在这种情况下，<ng-componet>现在变为弹性项目并开始具有弹性项目的默认属性。

我建议你改变HTML构造，现在可能是bootstrap团队会解决这个问题。

要获取有关默认属性弹性项目的更多信息，您可以单击here。

Answer 2

这是自动发生的，在ng-component之后，angular会生成router-outlet，与使用CSS flex无关。

如果未提供其他指令，则

ng-component是注入元素的默认标签名称。如此处https://stackoverflow.com/a/57702912/4320602

所示

来自https://medium.com/angular-in-depth/angular-router-series-secondary-outlets-primer-139206595e2

<router-outlet></router-outlet>
<ng-component>Routed components go here</ng-component>

从技术上讲，路由器会将路由组件放在路由器出口之后，放在一个元素内。这是自动发生的，因此您实际上无需键入该元素。

更多信息在这里： https://www.bennadel.com/blog/3350-routable-view-components-don-t-need-selectors-in-angular-4-4-4---but-they-may-be-helpful.htm

可能的解决方法是：

<router-outlet></router-outlet>

子组件具有Bootstrap网格的列：

  <div class="row">
    <div class="col-md-8">Hello, world!</div>
    <div class="col-md-4"></div>
  </div

因此angular会生成以下HTML：

    <router-outlet></router-outlet>
    <ng-component>
      <div class="row">
        <div class="col-md-8">Hello, world!</div>
        <div class="col-md-4"></div>
      </div>
    </ng-component>

Answer 3

将<div class="rows">包装在路由器插座中

<router-outlet> <div class="rows">...</div> </router-outlet>

考虑到<div class="rows">已从另一个文件夹外包

Answer 4

不可能，它不应该影响你的风格。

Angular2 router-outlet将组件输出到ng-component

4 个答案: