在Angular中，可以将多个bootstrap嵌入到一个页面中

1 年 ago

清, 宇

1 minute

有时候，为了将旧网站逐步替换为Angular，我们希望只将页面的某些部分转为Angular化。

如果只有一个替换部分，您可以简单地嵌入bootstrap组件的选择器标签。但是，如果想要在多个位置单独嵌入Angular，是否有可能呢？

-> 总的来说，是可能的。
但是需要注意一点。

<html>
  <head>...</head>
  <body>
    :
    <angular-root1></angular-root1>
    :
    <angular-root2></angular-root2>
    :
  </body>
</html>

如果您在模块中指定了带有选择器angular-root1和angular-root2的组件，同时加载了JavaScript文件，那么每个组件都将嵌入Angular，并且可以正常运行。

CSS选择器冲突问题

使用component组件时，可以使用style(css)。

<html>
  <head>
  :
  <style>
  .classA[_ngcontent-c0] {...}
  .classA[_ngcontent-c1] {...}
  </style>
  </head>
  <body>
    :
    <angular-root1>
        <div _ngcontent-c0 class="classA">
        :
        </div>
    </angular-root1>
    :
    <angular-root2></angular-root2>
    :
  </body>
</html>

使用标签嵌入和_ngcontent-c*属性进行选择器指定，样式被嵌入。在通常的多个组件中有相同名称的CSS类的情况下，为了避免样式冲突，该属性的后缀被分配不同的值。

然而，当作为另一个应用程序运行时，由于每个应用都分配了这个后缀，就会出现冲突。

避免的方式

也許有一種漂亮的避免方法，但是我還沒找到。

请在使用部件嵌入时，选择不太可能发生冲突的CSS类名。
（事实上，以前大家都很注意这方面的命名。）