在 Angular 中加载 App 组件以外的另一个组件

Question

我想首先通过替换 Appcomponent 来加载 Angular 项目中的 FleshScreenComponent 组件，因此我正在这样做

 bootstrap: [FleshScreenComponent],

但我还是做不到

因为我正在从 app.module.ts 文件中放入我的完整代码。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HttpClientModule }    from '@angular/common/http';
import { LoginComponent} from './LoginComponent/LoginComponent.component';
import { FleshScreenComponent} from './FleshScreenComponent/FleshScreenComponent.component';



@NgModule({
  declarations: [
    AppComponent,

    LoginComponent,
    FleshScreenComponent,


  ],
  imports: [

  ],
  entryComponents:[
    LoginComponent, PaymentComponent
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [ServicesService ,CommonStorageService,  {provide: MatDialogRef, useValue: {} }],
  bootstrap: [FleshScreenComponent],

})
export class AppModule { }

Answer 1

在 AppComponent 的 ngOnInit 方法中，如果您正在使用路由，您可以通过编程重定向到您的 FleshScreenComponent。

Answer 2

看看 at this demo.

您需要在 index.html 中提供 FleshScreenComponent 的选择器，就像我在 HelloComponent

的演示中所做的那样

<hello>loading</hello>

Answer 3

您可以使用路由在应用程序启动时加载所需的组件。这将为应用程序提供更好的结构。

将其放入应用程序-routing.module.ts

常量路线：路线= [{ 小路： ''，组件：FleshScreenComponent }];

这在 app.component.html

<router-outlet>
</router-outlet>

最后，不要忘记在 app.module 中导入您的路由模块，因为我发现您的代码中缺少此导入。

在 Angular 中加载 App 组件以外的另一个组件

Loading another component other then App component in Angular

typescript

angular

angular5

angular6

angular7