如何正確配置此虛擬Angular項目

Question

我有一個非常基本的項目：

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

這是以下代碼： /index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="mat-app-background basic-container">
    <br />
    <a href="https://material.angular.io/components/slide-toggle/api">API reference for Angular Material slide-toggle</a><br /><br />
    <select-reset-example>loading</select-reset-example>
    <div style="margin-top:30px;">
    <div style="color:#f00;margin-bottom:20px;">
          Below is what I need to get it work like above (but it doesn't):
    </div>
        <mat-slide-toggle>Slide me!</mat-slide-toggle>
    </div>
</div>

這是以下代碼： /app/select-reset-example.html

<mat-slide-toggle>Slide me!</mat-slide-toggle>

加載組件時： mat-slide-toggle through： select-reset-example起作用，但是直接加載到index.html則不起作用。

我的問題是，如何配置以下/main.ts文件以便直接在index.html上呈現mat-slide-toggle ？

如果范圍有問題，是否有可能創建一個自定義組件，該組件繼承自該mat-slide-toggle或MatSlideToggleModule類？

如果可能的話，您可以在stackblitz.com上分叉該項目，並為我提供具有正確配置的鏈接嗎？

import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material';
import { SelectResetExample } from './app/select-reset-example';
import { HttpModule } from '@angular/http';
import { CdkTableModule } from '@angular/cdk/table';

@NgModule({
  exports: [
    MatSlideToggleModule,
  ]
})
export class DemoMaterialModule { }

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

platformBrowserDynamic().bootstrapModule(AppModule);

這是項目的結構：

謝謝！

Answer 1

實際上，這里可以應用幾種選擇。

嘗試1

乍一看，我們只需導入MatSlideToggle組件並將其添加到bootstrap數組即可輕松解決您的問題：

import { MatSlideToggle } from '@angular/material';

@NgModule({
  ...
  bootstrap: [SelectResetExample, MatSlideToggle ]
                                  ^^^^^^^^^^^^^^
                               cool, it was very easy!!!
})
export class AppModule { }

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

嗯，看來我們已經破壞了一切：)。

為什么？

角引導程序SelectResetExample組件。 在此過程中，它將創建mat-slide-toggle ，它是select-reset-example.html模板的一部分。

所以現在我們的html有兩個mat-slide-toggle標簽。

然后，角度引導程序將第二個組件（ MatSlideToggle ）應用於第一個mat-slide-toggle 。 這樣，我們可以看到第一個工作的滑塊丟失了文本Slide me! 。

嘗試2

讓我們更改自舉組件的順序：

@NgModule({
  ...
  bootstrap: [ MatSlideToggle, SelectResetExample ]
})
export class AppModule { }

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

第二個滑塊現在可以使用，但是請稍候...我們再次丟失了文本。

這主要是因為angular無法處理自舉組件上的可投影節點。

嘗試3

角度給出了機會，通過內編寫代碼重寫引導過程ngDoBootstrap的方法@NgModule 。 我們試試吧...

import { ApplicationRef, ComponentFactoryResolver, Injector, NgModuleRef } from '@angular/core';

@NgModule({
  // we replaced bootstrap option with entryComponents
  entryComponents: [SelectResetExample, MatSlideToggle],
})
export class AppModule { 
  constructor(
    private resolver: ComponentFactoryResolver,
    private ngModule: NgModuleRef<any>) {}

  ngDoBootstrap(appRef: ApplicationRef) {

    const factory = this.resolver.resolveComponentFactory(MatSlideToggle);
    const target = document.querySelector('mat-slide-toggle');
    const compRef = factory.create(
       Injector.NULL,
       [Array.from(target.childNodes)], // passing projectable nodes
       target, 
       this.ngModule);

    appRef.attachView(compRef.hostView);


    appRef.bootstrap(SelectResetExample);
  }
}

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

在這里，我通過自定義方法ngDoBootstrap引導我們的組件。 它可以工作，但是...

這是什么？ 我真的需要知道嗎？

我不這么認為。 肯定還有其他出路。

嘗試4

為了不使我們的生活復雜化，我們應該遵循有角度框架的設計。 為此，最好有一個根組件。 創建它：

app.component.ts

@Component({
  selector: '.mat-app-background.basic-container',
  templateUrl: './app.component.html',
})
export class AppComponent {
}

app.component.html

<br />
<a href="https://material.angular.io/components/slide-toggle/api">API reference for Angular Material slide-toggle</a><br /><br />
<select-reset-example>loading</select-reset-example>
<div style="margin-top:30px;">
  <div style="color:#f00;margin-bottom:20px;">
    Below is what I need to get it work like above (but it doesn't):
  </div>
  <mat-slide-toggle>Slide me!</mat-slide-toggle>
</div>

模組

declarations: [SelectResetExample, AppComponent],
bootstrap: [AppComponent],

index.html

<div class="mat-app-background basic-container"></div>

我將樣式轉移到外部資源

Stackblitz示例