私は主ルートの子であり、二次名称のアウトレット経由で出力するサブメニューを作成しようとしています。しかし、私が子供のルーティングにルーティングするようにアプリケーションを取得しようとすると、私はエラーError: Cannot match any routes. URL Segment: 'apps/subroute'
を取得します。子ルートが角で表示されない
apps.component.html
<nav>
<ul>
<!-- Create navigation -->
<li *ngFor="let routing of subRouteList"
routerLinkActive="active"
(click)="subRoute(routing.name)">
<a>
{{routing.name}}
</a>
</li>
</ul>
</nav>
<br>
<h2>Applications by <em>Peter David Carter</em></h2>
<router-outlet name="appCategories"></router-outlet>
<p>
This is the section of the page where I'll be putting
some applications I've been working on.
Should be a few here within the next couple of days,
but for now I've including a link to a basic Skype
bot I created for an old project. If you're interested
in talking to <a href="https://join.skype.com/bot/1622b401-3752-465b-99d4-72aab7df6842">Emile</a>
click his name to add him as your Skype contact...
</p>
apps.component.ts
import { Component, OnInit, HostBinding } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
import { RouterModule, Routes } from '@angular/router';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import { AnimationsComponent } from './animations/animations.component';
import { BotsComponent } from './bots/bots.component';
import { MiscComponent } from './misc/misc.component';
import { VisualisationsComponent } from './visualisations/visualisations.component';
import { Routings, RoutingsService } from '../routings/routings.service';
@Component({
selector: 'app-apps',
templateUrl: './apps.component.html',
styleUrls: ['../submenus/submenus.css']
})
export class AppsComponent implements OnInit {
subRouteList: Routings = [{name: 'animations', animState: 'small'},
{name: 'bots', animState: 'small'},
{name: 'visualisations', animState: 'small'},
{name: 'misc', animState: 'small'}
];
constructor(private router: Router,
private route: ActivatedRoute,
private routingsService: RoutingsService) {}
subRoute(route: string): void {
console.log('entered subroute');
this.router.navigate([route], { relativeTo: this.route });
}
ngOnInit() {
}
}
app.routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from '../about/about.component';
import { BlogComponent } from '../blog/blog.component';
import { AppsComponent } from '../apps/apps.component';
import { ApiComponent } from '../api/api.component';
import { ProfileComponent } from '../users/profile.component';
import { AnimationsComponent } from '../apps/animations/animations.component';
import { BotsComponent } from '../apps/bots/bots.component';
import { VisualisationsComponent } from '../apps/visualisations/visualisations.component';
import { MiscComponent } from '../apps/misc/misc.component';
const routings: Routes = [
{ path: '', redirectTo: '/about', pathMatch: 'full' },
{ path: 'about', component: AboutComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'apps',
component: AppsComponent,
children: [
{
path: 'animations',
component: AnimationsComponent,
outlet: 'appCategories'
},
{
path: 'bots',
component: BotsComponent,
outlet: 'appCategories'
},
{
path: 'visualisations',
component: VisualisationsComponent,
outlet: 'appCategories'
},
{
path: 'misc',
component: MiscComponent,
outlet: 'appCategories'
},
]},
{ path: 'api', component: ApiComponent },
{ path: 'profile', component: ProfileComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routings, { enableTracing: true }) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
これらのルートはapps
ルートの子として定義されているため、apps/subroute
ルーティングが有効になっているという印象を受けました。物事が正しく機能するためには、私は何か別のものや追加のものを行う必要がありますか?
「アプリ/サブルート」にアクセスしようとしている実際のルートはありますか?エラー出力に記載されているように? – SimplyComplexable
私はそう思っていましたが、実際には '/ apps /(appCategories:animations)'のように見えるドキュメンテーションをもっと見ています。私は現在 '[routerLink] =" [{{アウトレット:{appCategories:['アニメーション'}}} '' '"と働いていますが、ルートを補間する方法は分かりません。名前の}} 'は動作しません)、またはコントローラ内の関数の中で' router.navigate'と同じことをします... –
多分私は混乱していますが、 apps/subroute 'は有効なルートです。 – SimplyComplexable