Блог

Главная - Вопросы по программированию - Угловая навигация по маршруту Nativescript выдает ошибку

Угловая навигация по маршруту Nativescript выдает ошибку

#angular #routes #nativescript

Вопрос:

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

app.component.html

 <MDBottomNavigation selectedIndex="0" (selectedIndexChanged)='onSelectedIndexChanged'>
  <MDTabStrip>
    <MDTabStripItem>
      <Label text="Book"></Label>
      <Image src="font://amp;#xe91f;" class="icm"></Image>
    </MDTabStripItem>
    <MDTabStripItem>
      <Label text="Stats"></Label>
      <Image src="font://amp;#xe99c;" class="icm"></Image>
    </MDTabStripItem>
    <MDTabStripItem>
      <Label text="Accounts"></Label>
      <Image src="font://amp;#xe964;" class="icm"></Image>
    </MDTabStripItem>
    <MDTabStripItem>
      <Label text="Settings"></Label>
      <Image src="font://amp;#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>

приложение-маршрутизация.модуль.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="amp;#xea12;" class="icmcur sectionItems"></Label>
      <Label row=0 col=2 class="far sectionItems" textWrap="true">
        <FormattedString>
          <Span text="Transaction Settingsamp;#xa;" ></Span>
          <Span text="Monlthy Start Date, Carry-over Setting, {Peiod, Others" class="subtext"></Span>
        </FormattedString>
      </Label>
       

      <Label row=1 col=1 text="amp;#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="amp;#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="amp;#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="amp;#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="amp;#xe964;" class="icm sectionItems" (tap)="showAccountSettings()"></Label>
      <Label row=2 col=2 class="far sectionItems" textWrap="true" (tap)="showAccountSettings()">
        <FormattedString>
          <Span text="Account Settingsamp;#xa;" ></Span>
          <Span text="Type, Accounts, Balance, Transfer_expense Setting" class="subtext"></Span>
        </FormattedString>
      </Label>
    </GridLayout>
  </StackLayout>
</ScrollView>

экран настроек

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

Я создал два новых файла в разделе /настройки/настройка учетной записи/

  1. accountsetting.component.html
  2. настройка учетных записей.componet.ts

Я обновил настройку/настройку-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 {}

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

Спасибо

Ответ №1:

Я внес изменения, как показано ниже, и это сработало.

  this.router.navigate([ {outlets: {settings:['accountsetting']}}]).then((data)=> {
      console.log('rednered', data);
    }).catch(err => console.log(err));
Метки: