如何直接在index.html文件上加载Angular2组件?

时间:2018-01-11 03:02:09

标签: javascript html angular typescript

我有以下项目:

$ mkdir angular-material-select
$ cd angular-material-select
$ git clone https://github.com/zeuscronos/angular-material-select.git .
$ git checkout mat-slide-toggle 
$ npm install
$ ng serve

请注意选择分支:mat-slide-toggle

我需要能够从mat-slide-toggle文件加载组件/src/index.html

在文件中:/src/app/app.module.ts我有以下内容:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatNativeDateModule } from '@angular/material';
import { SelectResetExample } from './select-reset-example';
import { DemoMaterialModule } from './demomaterial.module';
import { MatSlideToggle } from '@angular/material/slide-toggle'

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        DemoMaterialModule,
        MatNativeDateModule,
        ReactiveFormsModule,
    ],
    entryComponents: [MatSlideToggle],
    declarations: [MatSlideToggle],
    bootstrap: [MatSlideToggle],
    providers: []
})
export class AppModule { }

在文件中:/src/index.html我有以下内容:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AngularTemplate</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <div class="mat-app-background basic-container">
        <mat-slide-toggle>Slide me!</mat-slide-toggle>
    </div>
</body>

</html>

这是项目的结构:

enter image description here

我在分支上的项目:master正常运行,但在其使用的/src/index.html文件中:<select-reset-example>loading</select-reset-example>我希望使用:<mat-slide-toggle>Slide me!</mat-slide-toggle>。下面,我对分支进行了更改:master到分支:mat-slide-toggle

enter image description here

你可以看到here

然后,当我用上面的例子运行:

$ ng serve

我只获得了我放在mat-slide-toggle组件中的内部html内容:

Slide me!

所以,它没有用。

关于如何使这项工作的任何想法?

[第1版开始]

我正在研究这个问题:

原创(工作):

https://stackblitz.com/edit/angular-rktmgc-5we8sr?file=index.html

基于@Asura评论修改(不工作):

https://stackblitz.com/edit/angular-rktmgc-k2isdx?file=main.ts

[第1版结束]

感谢。

1 个答案:

答案 0 :(得分:0)

您需要加载模块MatSlideToggleModule而不是MatSlideToggle 为了能够使用mat-slide-toggle

https://material.angular.io/components/slide-toggle/api

示例:https://stackblitz.com/edit/angular-rktmgc-bazda7