2

在 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标签？

4

4 回答 4

1

这是因为.row上课而发生的。它有一个属性display:flex是弹性项目的容器。

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

我建议你现在改变你的 HTML 结构，引导团队可能会解决这个问题。

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

于 2017-07-06T01:01:06.660 回答
0

将您的<div class="rows">包裹放在路由器插座中

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

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

于 2019-12-05T07:47:31.153 回答
0

这会自动发生，角度ng-component在 a 之后生成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-routeable-view-components-don-t-need-selectors-in-angular-4-4-4---but-they-may-有帮助的.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>
于 2019-11-25T16:48:53.480 回答
-3

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

于 2017-05-07T10:41:51.220 回答