我目前正在为我的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]
我的客户产品组件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();
}
}
我的客户产品组件质量标准:
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是什么?
1条答案
按热度按时间nxowjjhe1#
您的
app.module
中是否有bootstrap: [AppComponent],
这一行?这意味着AppComponent是应用程序的入口点,所有内容都需要进入该入口点。如果您希望根据路由加载不同的组件,您需要:
1.将
<routet-outlet></router-outlet>
添加到您的app.component.html
1.像您一样添加路由
而不路由到Appcomponent,因为所有这些路由都在Appcomponent内部。
1.确保在
AppModule
中导入AppRoutingModule
希望有帮助:)