要从Angular组件生成URL,可以使用Angular的Router模块。以下是一个示例解决方案:
npm install @angular/router --save
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
template: `
Welcome to Home
`,
})
export class HomeComponent {
constructor(private router: Router) {}
goToAbout() {
this.router.navigateByUrl('/about');
}
}
在上面的代码中,我们在HomeComponent中注入了Router模块,并在goToAbout方法中使用router.navigateByUrl方法导航到AboutComponent的URL。
这就是从Angular组件生成URL的解决方法。使用Router模块,我们可以轻松地在Angular应用程序中进行导航。