Навигация по маршруту Angular Nativescript дает ошибку — Стиль жизни

Я не могу выполнять маршрутизацию с помощью кода в Angular nativescript. Любые указатели помогут лучше понять это. Пока что в моем приложении есть четыре вкладки.

app.component.html

app-routing.module.ts

import { NgModule } from ‘@angular/core’ import { Routes } from ‘@angular/router’ import { NativeScriptRouterModule } from ‘@nativescript/angular’ import {BookComponent} from ‘./book/book.component’; import {StatsComponent} from ‘./stats/stats.component’; import {AccountComponent} from ‘./account/account.component’; import {SettingComponent} from ‘./setting/setting.component’; import { AccountSettingComponent } from ‘./setting/accountsetting/accountsetting.component’; const routes: Routes = [ { path: », redirectTo: «/(book:book//stats:stats//accounts:accounts//settings:settings)», pathMatch: ‘full’, }, { path: ‘book’, component: BookComponent, outlet: «book», }, { path: ‘stats’, component: StatsComponent, outlet: «stats», }, { path: ‘accounts’, component: AccountComponent, outlet: ‘accounts’, }, { path: ‘settings’, component: SettingComponent, outlet: ‘settings’, }, ] @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule], }) export class AppRoutingModule {}

Эти четыре вкладки работают нормально, и экран выглядит следующим образом:

Теперь для четвертой вкладки я добавил следующий шаблон

setting / setting.component.html

Вот где я застрял. то, что я хотел сделать, — это когда я нажимаю на любой элемент меню, я хочу перейти на новый экран. Навигация должна выполняться в коде, без использования тега router-link в шаблоне.

Я создал два новых файла в / settings / accountsetting /

accountsetting.component.html
accountsetting.componet.ts

Я обновил файл setting / setting-routing.module.ts, как показано ниже.

настройка / настройка-routing.module.ts

import { NgModule } from ‘@angular/core’ import { Routes } from ‘@angular/router’ import { NativeScriptRouterModule } from ‘@nativescript/angular’ import { AccountSettingComponent } from ‘./accountsetting/accountsetting.component’ const routes: Routes = [ { path: ‘accountsetting’, component: AccountSettingComponent, outlet: ‘settings’, }, ] @NgModule({ imports: [NativeScriptRouterModule.forChild(routes)], exports: [NativeScriptRouterModule], }) export class SettingRoutingModule {}

setting / setting.component.ts

import { Component, OnInit } from ‘@angular/core’ import { ActivatedRoute } from ‘@angular/router’; import { RouterExtensions } from ‘@nativescript/angular’; @Component({ templateUrl: ‘./setting.component.html’, }) export class SettingComponent implements OnInit { constructor(private router:RouterExtensions, private currentRoute: ActivatedRoute) { // Use the constructor to inject services. } ngOnInit(): void { // Use the «ngOnInit» handler to initialize data for the view. } showAccountSettings(){ console.log(‘clicked’, this.currentRoute.outlet, this.currentRoute.snapshot.toString()) this.router.navigate([‘accountsetting’, {relativeTo: this.currentRoute, outlets: {settings:[]}}]).then((data)=> { console.log(‘rednered’, data); }).catch(err => console.log(err)); } }

При нажатии на ссылку появляется следующая ошибка.

JS: clicked settings Route(url:’settings’, path:’settings’) JS: Error: Cannot match any routes. URL Segment: ‘accountsetting’

Я пробовал много вещей и искал в стеке, но это просто сбивало с толку. Пожалуйста помоги! Я новичок в Angular, а также в nativescript, я уверен, что мне не хватает чего-то очень простого. Мои извинения. Любое руководство поможет.

Спасибо

Источник: ledsshop.ru