Question

我正在使用Angular2。我有一个单独的登录页面，我不能将它用作组件，因为样式与应用程序的其余部分非常不同。我可以使用登录页面作为组件，但我需要创建一个单独的页面，以便在用户登录后我可以重定向到我的主应用程序。

登录页面如下：

<body class="login">
</body>

页面的其余部分如下：

<body>
</body>

Answer 1

您可以创建一个登录组件并完全隔离其样式。也就是说，它不会干扰其他页面的样式。

查看ViewEncapsulation属性。

这是另一个链接：View Encapsulation in Angular2

在这种情况下，index.html中的所有页面看起来都是一样的。你要造型的是组件本身

<body>
...
</body>


<body>
   <login><!-- this is the where styling should start from --!>
     ...
   </login>
</body>

你的组件：

@Component({
  selector:      'login',
  pipes:         [ ],
  providers:     [ ],
  encapsulation: ViewEncapsulation.Emulated,
  styles:        [ 
    ".login { 
      ...
    "
  ],
  template: "<div class='login'...> </div>"

使用Angular2登录页面

1 个答案: