Material design lite复选框无法正确呈现

Question

在我的index.html中，我有：

  <!-- Material Design Lite -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-red.min.css" />
  <script src="/bower_components/material-design-lite/material.min.js"></script>
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="styles.css">

  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>

  <script src="systemjs.config.js"></script> 

对于复选框，我有以下代码：

<div class="demo-checkbox myCheck">
                <h5>You have choosen so far</h5>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
                    <input type="checkbox" [(ngModel)]="hasHall" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Marriage Hall</span> 
                </label>

                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
                    <input type="checkbox" [(ngModel)]="hasCaterer" class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Caterer</span>
                </label>
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" >
                    <input type="checkbox"  class="mdl-checkbox__input" />
                    <span class="mdl-checkbox__label">Decorator</span>
                </label>
            </div>

然而，这会产生以下复选框：

为什么会这样？按钮和其他组件 正确呈现，只有复选框才能解决此问题。

Answer 1

我把它放到jsfiddle中，通过添加材质设计js库，复选框正确呈现，它可能是你如何引用你的js，试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>

Answer 2

默认javascripts覆盖mdl没有任何问题。我有一个解决方法如下：

在我各自的x.component.ts中：

import { Component, OnInit } from '@angular/core';
declare var componentHandler: any;

ngOnInit() {
    componentHandler.upgradeAllRegistered();
}

这解决了渲染问题