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

有时候,为了将旧网站逐步替换为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类名。
(事实上,以前大家都很注意这方面的命名。)

广告
将在 10 秒后关闭
bannerAds