Verwenden Sie Angular Material nur in einem Teil einer Seite

Question

Ich bin daran interessiert, ein auf Angular Material basierendes Kontaktformular auf einer von Shopify gehosteten Seite zu verwenden. Da der Rest der Site (noch) nicht mit Angular Material erstellt wurde, möchte ich dieses Kontaktformular modular implementieren und innerhalb seiner eigenen div. Datei isolieren. Das Problem, auf das ich gestoßen bin, ist, dass das Stylesheet (derzeit im Kopf verknüpft) für Angular Material Seitenelemente außerhalb des gewünschten Einflussbereichs beeinflusst. Ist es möglich, den Inhalt von Angular Material vom Rest der Seite zu isolieren? Wie könnte man darüber gehen?

Answer 1

Die einzige Möglichkeit, wie Sie dies tun können, ist die Verwendung eines iframe, weil die CSS immer kombinieren wird, und folgt der Regel der Kaskade, so dass die untere die anderen überschreibt.

Answer 2

Sie können separate Angular-Modul für Ihre benötigte Template-Datei erstellen und dort eckiges Material einspritzen. Verknüpfen Sie Angular-Material-CSS nur in dieser Vorlagendatei. Auf diese Weise werden andere Seiten nicht beeinflusst.

Answer 3

Sie können Winkel-UI-Router-Zustände mit separaten Winkelmodulen verwenden. So können Sie Winkelmaterial aus dem Zustand Ihrer Routen injizieren und dann verwenden.

 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'));