Angular 前端只显示app.component.html

Question

我目前正在为我的 API 创建一个前端，现在是时候创建另一个组件了。 我什么都试过了，甚至创建了一个 app-routing.module.ts，但它只显示我的 app.component.html？ 我不明白为什么..我的 app-routing:module.ts ：

import { AppComponent } from './app.component';
import { clientprodComponent } from './clientproduct/clientprod.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appTtitle = document.title;

const routes: Routes = [
 {path:"", component: AppComponent},
 {path:"clientprod", component: clientprodComponent},

];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [AppComponent, clientprodComponent]

我的 clientprod.component.ts：

import { CloudProductService } from './cloudproduct.service';
import { CloudProduct } from './cloudproduct';
import { Component, OnInit } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { NgForm } from '@angular/forms';
import * as $ from 'jquery';

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

export class clientprodComponent implements OnInit {
 public cloudProducts: CloudProduct[] | null;
 public editProduct: CloudProduct | null;
 public deleteProduct: CloudProduct | null;
 constructor(private cloudProductService: CloudProductService){}

 ngOnInit(){
   this.getCloudProducts();
 }

   public getCloudProducts():void{
     this.cloudProductService.getCloudProducts().subscribe(
       (response: CloudProduct[]) =>{
         this.cloudProducts = response;
       },
       (error: HttpErrorResponse) => {
         alert(error.message);
       }
     );
 }


 public onOpenModal(cloudProduct: CloudProduct | null, mode: string): void {
   const container = document.getElementById('main-container');
   const button = document.createElement('button');
   button.type = 'button';
   button.style.display = 'none';
   button.setAttribute('data-toggle', 'modal');
   if (mode === 'add') {
     button.setAttribute('data-target', '#addProductModal');
   }
   if (mode === 'edit') {
     this.editProduct = cloudProduct;
     button.setAttribute('data-target', '#updateProductModal');
   }
   if (mode === 'delete') {
     this.deleteProduct = cloudProduct;
     button.setAttribute('data-target', '#deleteProductModal');
   }
   container!.appendChild(button);
   button.click();
 }


}

我的 clientprod.component.spec.ts：

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { clientprodComponent } from './clientprod.component';

describe('clientprodComponent', () => {
 let component: clientprodComponent;
 let fixture: ComponentFixture<clientprodComponent>;

 beforeEach(async () => {
   await TestBed.configureTestingModule({
     declarations: [ clientprodComponent ]
   })
   .compileComponents();

   fixture = TestBed.createComponent(clientprodComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });

 it('should create', () => {
   expect(component).toBeTruthy();
 });
});

我不明白，我在我的 app.module.ts 中也导入了它...为什么它只显示 app.component.html，不管 url？

Answer 1

你的 app.module 中有这行bootstrap: [AppComponent], app.module ？

这意味着 AppComponent 它是应用程序的入口点，所有内容都需要 go 在这个里面。 如果你想根据路由加载不同的组件，你需要：

1. 添加<routet-outlet></router-outlet>到你的app.component.html

2. 像你一样添加路线

   const routes: Routes = [ {path:"clientprod", component: clientprodComponent}, ];

   没有路由到 Appcomponent 因为所有这些路由都在里面。

3. 确保在AppModule中导入AppRoutingModule

希望能帮助到你：）