Angular配置路由以及动态路由取值传值跳转
<p>Angular配置路由</p><p>1、找到 app-routing.module.ts 配置路由</p>
<p>引入组件</p>
<pre class="brush:html;toolbar:false">import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';</pre>
<p>配置路由</p>
<pre class="brush:html;toolbar:false">const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];</pre>
<p>找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由</p>
<pre class="brush:html;toolbar:false"><h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet></pre>
<p> </p>
<p>Angular routerLinkActive设置routerLink 默认选中路由</p>
<pre class="brush:html;toolbar:false"><h1>
<a ="[ '/home' ]" routerLinkActive="active">首页</a>
<a ="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1></pre>
<p> </p>
<p> </p>
<p>动态路由传值与取值</p>
<p>跳转传值</p>
<pre class="brush:html;toolbar:false"><a ="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a></pre>
<p>获取动态路由的值</p>
<pre class="brush:c#;toolbar:false">import { ActivatedRoute} from '@angular/router';
constructor( private route: ActivatedRoute) {
}
public id: Number;
ngOnInit() {
console.log(this.route.params);
this.route.params.subscribe(data=>this.id=data.id);
}</pre>
<p> </p>
<p>动态路由的 js 跳转</p>
<pre class="brush:html;toolbar:false">import { Router } from '@angular/router
export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}
goNews(){
// this.router.navigate(['/newscontent', hero.id]);
this.router.navigate(['/newscontent']);
}
}</pre><br><br>
来源：https://www.cnblogs.com/reaf/p/11276744.html
頁:
[1]