要解决Angular导航问题,可以按照以下步骤进行操作:
导航组件(nav.component.ts)示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-nav',
template: `
`,
styles: [`
nav {
background: #333;
color: #fff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
}
li a {
color: #fff;
text-decoration: none;
}
`]
})
export class NavComponent {}
导航组件(nav.component.ts)示例代码:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-nav',
template: `
`,
styles: [`
nav {
background: #333;
color: #fff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
}
li a {
color: #fff;
text-decoration: none;
cursor: pointer;
}
`]
})
export class NavComponent {
constructor(private router: Router) {}
navigate(url: string) {
this.router.navigateByUrl(url);
}
}
使用导航组件的示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`,
styles: []
})
export class AppComponent {}
通过以上步骤,你可以在Angular应用中创建一个导航组件,并使用路由模块进行页面导航。