要从component.ts文件加载其他的component.html文件吗？

Question

我对angular不熟悉，我想知道如何从home.component.html内部的方法加载不同的books.component.ts文件。

这是我的books.component.ts文件。

 import { Component, OnInit } from '@angular/core';
 import {BooksService} from '../books.service';
 import {NgForm} from '@angular/forms';
 import { Router } from '@angular/router';


 @Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
 })
export class BooksComponent {

  constructor(private httpService: BooksService, private router:Router) {

  }

  status : any;

  onSubmit(f: NgForm) {
    console.log("AM I HERE AT LEAST");


    this.httpService.checkLoginCred(f.value).subscribe(

     data => {

    // console.log(Object.values(data)[0]);
    this.status = Object.values(data)[0];

    if(this.status === "Successful"){

       var path = "../home/home.component.html";
     // console.log($location.path());
      //console.log(this.router);
      this.router.navigate(['/home']);
      console.log("GREAT!");
    }

    return true;
  }

  );


  }


}

我的app.module.ts看起来像这样：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BooksComponent } from './books/books.component';
import { HomeComponent } from './home/home.component';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';


@NgModule({
 declarations: [
   AppComponent,
BooksComponent,
HomeComponent,
 ],
 imports: [
   RouterModule.forRoot([
     {
       path: 'home',
       component:  HomeComponent
     }
   ]),
   BrowserModule,
   HttpClientModule,
   AppRoutingModule,
   FormsModule,
   ReactiveFormsModule

 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

我的books.component.ts和books.component.html文件位于我的books目录中。

我的home.component.ts和home.component.html文件在我的home目录中

我已经附上了我的目录结构的屏幕截图。

到目前为止，我正在尝试使用this.router.navigate，但我对此不太满意。

任何帮助将不胜感激！

编辑

我的home.component.ts文件如下所示：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent {

  constructor() { }

  }

Answer 1

正如我们所讨论的-这是解决方案-希望它可以工作

仅在<router-outlet></router-outlet>上添加app.compoment.html并使用路由尝试渲染组件

您的路线应为

RouterModule.forRoot([
     {
       path: 'home',
       component:  HomeComponent
     },
     {
       path: 'book',
       component:  BookComponent
     },
     {
       path: '',
       redirectTo:  'book'
       pathMatch: 'full'
     }
   ])

因此，在初始加载时，您的路径将匹配为空，并重定向到BookComponent，并且在导航时会在book组件内部将HomeComponent加载到AppComponent html内

希望这可以解决您的问题-编码愉快：-）