Я не могу выполнять маршрутизацию с помощью кода в Angular nativescript. Любые указатели помогут лучше понять это. Пока что в моем приложении есть четыре вкладки.
app.component.html
<MDBottomNavigation selectedIndex="0" (selectedIndexChanged)='onSelectedIndexChanged'>
<MDTabStrip>
<MDTabStripItem>
<Label text="Book"></Label>
<Image src="font://" class="icm"></Image>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Stats"></Label>
<Image src="font://" class="icm"></Image>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Accounts"></Label>
<Image src="font://" class="icm"></Image>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Settings"></Label>
<Image src="font://" 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="" class="icmcur sectionItems"></Label>
<Label row=0 col=2 class="far sectionItems" textWrap="true">
<FormattedString>
<Span text="Transaction Settings
" ></Span>
<Span text="Monlthy Start Date, Carry-over Setting, {Peiod, Others" class="subtext"></Span>
</FormattedString>
</Label>
<Label row=1 col=1 text="" 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="" 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="" 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="" 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="" class="icm sectionItems" (tap)="showAccountSettings()"></Label>
<Label row=2 col=2 class="far sectionItems" textWrap="true" (tap)="showAccountSettings()">
<FormattedString>
<Span text="Account Settings
" ></Span>
<Span text="Type, Accounts, Balance, Transfer_expense Setting" class="subtext"></Span>
</FormattedString>
</Label>
</GridLayout>
</StackLayout>
</ScrollView>
Вот где я застрял. то, что я хотел сделать, — это когда я нажимаю на любой элемент меню, я хочу перейти на новый экран. Навигация должна выполняться в коде, без использования тега 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, я уверен, что мне не хватает чего-то очень простого. Мои извинения. Любое руководство поможет.
Спасибо
Я внес изменения, как показано ниже, и это сработало.