Навигация по маршруту Angular Nativescript дает ошибку [nativescript, angular, routes]

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

Содержание

app.component.html
app-routing.module.ts
setting / setting.component.html
настройка / настройка-routing.module.ts
setting / setting.component.ts

app.component.html

<MDBottomNavigation selectedIndex="0" (selectedIndexChanged)='onSelectedIndexChanged'>
  <MDTabStrip>
    <MDTabStripItem>
      <Label text="Book"></Label>
      <Image src="font://&#xe91f;" class="icm"></Image>
    </MDTabStripItem>
    <MDTabStripItem>
      <Label text="Stats"></Label>
      <Image src="font://&#xe99c;" class="icm"></Image>
    </MDTabStripItem>
    <MDTabStripItem>
      <Label text="Accounts"></Label>
      <Image src="font://&#xe964;" class="icm"></Image>
    </MDTabStripItem>
    <MDTabStripItem>
      <Label text="Settings"></Label>
      <Image src="font://&#xe994;" class="icm"></Image>
    </MDTabStripItem>
  </MDTabStrip>

  <MDTabContentItem>
    <page-router-outlet name="book"></page-router-outlet>
  </MDTabContentItem>
  <MDTabContentItem>
    <page-router-outlet name="stats"></page-router-outlet>
  </MDTabContentItem>
  <MDTabContentItem>
    <page-router-outlet name="accounts"></page-router-outlet>
  </MDTabContentItem>
  <MDTabContentItem>
    <page-router-outlet name="settings"></page-router-outlet>
  </MDTabContentItem>
</MDBottomNavigation>

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

<ActionBar>
  <Label text="Setting"></Label>
</ActionBar>

<ScrollView>
  <StackLayout>
    <!-- TRANSACTION SETTINGS -->
    <page-router-outlet name="accountsetting"></page-router-outlet>

    <Label text='Transaction' class="fas sectionHeader"></Label>
    <GridLayout rows="*,*,*" columns="*,*,20*" style="background-color:rgb(238, 238, 238);">
      <Label row=0 col=1 text="&#xea12;" class="icmcur sectionItems"></Label>
      <Label row=0 col=2 class="far sectionItems" textWrap="true">
        <FormattedString>
          <Span text="Transaction Settings&#xa;" ></Span>
          <Span text="Monlthy Start Date, Carry-over Setting, {Peiod, Others" class="subtext"></Span>
        </FormattedString>
      </Label>
       

      <Label row=1 col=1 text="&#xea11;" class="icmcur sectionItems"></Label>
      <Label row=1 col=2 class="far sectionItems"  textWrap="true">
        <FormattedString>
          <Span text="Repeat Settings" ></Span>
        </FormattedString>
      </Label>  

      <Label row=2 col=1 text="&#xe964;" class="icm sectionItems"></Label>
      <Label row=2 col=2 class="far sectionItems" textWrap="true">
        <FormattedString>
          <Span text="Copy-Paste Settings" ></Span>
        </FormattedString>
      </Label>
    </GridLayout>


    <Label text='Category/Accounts' class="fas sectionHeader"></Label>
    <GridLayout rows="*,*,*" columns="*,*,20*" style="background-color:rgb(238, 238, 238);">
      <Label row=0 col=1 text="&#xea12;" class="icmcur sectionItems"></Label>
      <Label row=0 col=2 class="far sectionItems" textWrap="true">
        <FormattedString>
          <Span text="Income Category Settings" ></Span>
        </FormattedString>
      </Label>  

      <Label row=1 col=1 text="&#xea11;" class="icmcur sectionItems"></Label>
      <Label row=1 col=2 class="far sectionItems"  textWrap="true">
        <FormattedString>
          <Span text="Expense Category Settings" ></Span>
        </FormattedString>
      </Label>  

      <Label row=2 col=1 text="&#xe964;" class="icm sectionItems" (tap)="showAccountSettings()"></Label>
      <Label row=2 col=2 class="far sectionItems" textWrap="true" (tap)="showAccountSettings()">
        <FormattedString>
          <Span text="Account Settings&#xa;" ></Span>
          <Span text="Type, Accounts, Balance, Transfer_expense Setting" class="subtext"></Span>
        </FormattedString>
      </Label>
    </GridLayout>
  </StackLayout>
</ScrollView>

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

См. также: проблема с разрешением чтение снежинки с S3

Я создал два новых файла в / 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, я уверен, что мне не хватает чего-то очень простого. Мои извинения. Любое руководство поможет.

Спасибо

Post Views: 104