Question

我有兴趣在Shopify托管页面上使用基于角度材质的联系表单。因为网站的其余部分不是使用Angular Material构建的，所以我想以模块化的方式实现这个联系表单，并将其隔离在自己的div中。我遇到的问题是Angular Material的样式表（当前链接在头部）影响了所需影响区域之外的页面元素。是否可以将Angular Material内容与页面的其余部分隔离开来？一个人怎么可能呢？

Answer 1

您可以为所需的模板文件创建单独的角度模块，并在那里注入角度材质。仅在该模板文件中链接角度材质CSS。这样它就不会影响其他页面。

Answer 2

我认为你可以做到这一点的唯一方法是使用iframe，因为css将始终合并，并且将遵循级联规则，因此下面的那个将覆盖其他的。

Answer 3

您可以将angular-ui-router状态与单独的角度模块一起使用。因此，您可以将角度材料注入路线状态之一，然后使用它。

     module.exports =
      angular.module('parentModule', [
        'angularMoment',
        require("./childFolder"),

      ])
   .config(function ($stateProvider) {
    $stateProvider
    .state('parent', {
      url:"parent/",
      views:{
        '': {
          templateUrl: 'main/layout.html',
          controller: 'MainController'
        }
      }
    })
 .controller('MainController', require('./mainController'));

    module.exports =
      angular.module('childModule', [
        'ngMateiral', 'ngMessages'
      ])
.config(function ($stateProvider) {
      $stateProvider
        .state('parent.child', {
          url: "parent/:id",
          views: {
            '': {
              templateUrl: 'main/layout.html',
              controller: 'MainController'
            },
            'content@main': {
              templateUrl: 'main/child/layout.html'
              controller: 'ChildController'
            }
          }
        });
    })
     .controller('ChildController', require('./childController'));

仅在页面的一部分中使用Angular Material

3 个答案: