[英]Angular2 - How to conditionally load css file in index.html?
[英]How to load an Angular2 component directly on the index.html file?
我有以下项目:
$ 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
。
我需要能够加载组件: /src/index.html
文件中的mat-slide-toggle
。
在文件: /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>
这是项目的结构:
我在分支机构上的项目: master
正常运行,但是在/src/index.html
文件中,它正在使用: <select-reset-example>loading</select-reset-example>
而我想使用: <mat-slide-toggle>Slide me!</mat-slide-toggle>
。 在下面,您做了我从branch: master
到branch: mat-slide-toggle
的更改:
你可以看到在这里 。
然后,当我运行上面的示例时:
$ 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版结束]
谢谢。
您需要加载模块MatSlideToggleModule而不是MatSlideToggle才能使用mat-slide-toggle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.