angular中的动态路由
<div class="page" title="Page 4"><div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">1.<span style="font-size: 10pt; font-family: "SimSun"">配置动态路由 </span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> routes: Routes =<span style="color: rgba(0, 0, 0, 1)"> [
{path: </span>'home'<span style="color: rgba(0, 0, 0, 1)">, component: HomeComponent},
{path: </span>'news'<span style="color: rgba(0, 0, 0, 1)">, component: NewsComponent},
{path: </span>'newscontent/:id'<span style="color: rgba(0, 0, 0, 1)">, component: NewscontentComponent},
{
path: </span>''<span style="color: rgba(0, 0, 0, 1)">,
redirectTo: </span>'/home'<span style="color: rgba(0, 0, 0, 1)">,
pathMatch: </span>'full'<span style="color: rgba(0, 0, 0, 1)">
} ];</span></pre>
</div>
<p> </p>
<p>2.跳转传值</p>
<div class="cnblogs_code">
<pre><a ="[ '/newscontent/',aid]">跳转到详情</a> <br><a routerLink="/newscontent/{{aid}}">跳转到详情</a></pre>
</div>
<div class="page" title="Page 4">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">3.<span style="font-size: 10pt; font-family: "SimSun"">获取动态路由的值<br>
</span></span></p>
</div>
</div>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> { ActivatedRoute} from '@angular/router';</pre>
</div>
<div class="cnblogs_code">
<pre> constructor( <span style="color: rgba(0, 0, 255, 1)">private</span> route: ActivatedRoute) { }</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">ngOnInit() {
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.route.params);
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.route.params.subscribe(data=><span style="color: rgba(0, 0, 255, 1)">this</span>.id=<span style="color: rgba(0, 0, 0, 1)">data.id);
}</span></pre>
</div>
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p> </p>
<hr>
<h3><span style="font-size: 22pt; font-family: "SimSun""><span style="font-size: 14px">动态路由的 </span><span style="font-size: 22pt; font-family: "Calibri"; font-weight: bold"><span style="font-size: 14px">js </span><span style="font-size: 22pt; font-family: "SimSun""><span style="font-size: 14px">跳转</span> </span></span></span></h3>
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">1. <span style="font-size: 10pt; font-family: "SimSun"">引入 </span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> { Router } from '@angular/router';</pre>
</div>
<p> </p>
<p>2.初始化</p>
<div class="cnblogs_code">
<pre>xport <span style="color: rgba(0, 0, 255, 1)">class</span> HomeComponent <span style="color: rgba(0, 0, 255, 1)">implements</span> OnInit { constructor(<span style="color: rgba(0, 0, 255, 1)">private</span><span style="color: rgba(0, 0, 0, 1)"> router: Router) {
}
ngOnInit() {
}
goNews(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.router.navigate(['/news', hero.id]);</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.router.navigate(['/news'<span style="color: rgba(0, 0, 0, 1)">]);
}
}</span></pre>
</div>
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "SimSun"; background-color: rgba(255, 255, 255, 1)">3.路由跳转</span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.router.navigate(['/news', hero.id]);</pre>
</div>
<p> </p>
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p> </p>
<hr>
<p><span style="font-size: 22pt; font-family: "SimSun"">路由 <span style="font-size: 22pt; font-family: "Calibri"; font-weight: bold">get <span style="font-size: 22pt; font-family: "SimSun"">传值 <span style="font-size: 22pt; font-family: "Calibri"; font-weight: bold">js <span style="font-size: 22pt; font-family: "SimSun"">跳转 </span></span></span></span></span></p>
<p> </p>
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"">1. <span style="font-size: 10pt; font-family: "SimSun"">引入 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">NavigationExtras </span></span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">import</span> { Router ,NavigationExtras} from '@angular/router';</pre>
</div>
<p> </p>
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">2.<span style="font-size: 10pt; font-family: "SimSun"">定义一个 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">goNewsContent <span style="font-size: 10pt; font-family: "SimSun"">方法执行跳转，用 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">NavigationExtras <span style="font-size: 10pt; font-family: "SimSun"">配置传参。 </span></span></span></span></span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">goNewsContent(){
let navigationExtras: NavigationExtras </span>=<span style="color: rgba(0, 0, 0, 1)"> {
queryParams: { </span>'session_id': '123'<span style="color: rgba(0, 0, 0, 1)"> },
fragment: </span>'anchor'<span style="color: rgba(0, 0, 0, 1)">
};
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.router.navigate(['/news'<span style="color: rgba(0, 0, 0, 1)">],navigationExtras);
}</span></pre>
</div>
<p> </p>
<div class="page" title="Page 6">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">3.<span style="font-size: 10pt; font-family: "SimSun"">获取 <span style="font-size: 10pt; font-family: "Calibri"; font-weight: bold">get <span style="font-size: 10pt; font-family: "SimSun"">传值 </span></span></span></span></p>
<p> </p>
<div class="cnblogs_code">
<pre> constructor(<span style="color: rgba(0, 0, 255, 1)">private</span><span style="color: rgba(0, 0, 0, 1)"> route: ActivatedRoute) {
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.route.queryParams);
}</span></pre>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
<p> </p>
</div>
</div>
</div>
<p> </p>
</div>
</div>
</div>
<p> </p>
</div>
</div>
</div>
<p> </p>
</div>
</div>
</div>
<p> </p>
<p> </p>
</div>
</div>
</div>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10912198.html
頁:
[1]