Question

如何在<pager-router-outlet>标记内的组件之间导航？我是Nativescript的新手。

我有一个本机脚本（使用Angular 2）。它包含一个导航栏（选项卡视图），该导航栏为每个选项卡项（文件：app.component.html）使用<page-router-outlet>。

在主页选项卡中，有一个用户帖子供稿。有一个飞行动作按钮，该按钮应导航到另一个组件，您可以在其中添加用户帖子。我想在ts文件中有一个可以导航到其他组件的函数。

app.component.html（导航栏）

<TabView 
    androidTabsPosition="bottom"
    tabBackgroundColor="white"
    class="font-awesome icon">

    <page-router-outlet
        *tabItem="{title: '&#xf015;'}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: '&#xf002;'}"
        name="searchTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: '&#xf19d;' }"
        name="educationTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: '&#xf0f3;'}"
        name="notificationTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: '&#xf007;'}"
        name="profileTab">
    </page-router-outlet>

</TabView>

home.component.ts

 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { registerElement } from "nativescript-angular/element-registry";
 import { RouterExtensions } from "nativescript-angular/router";
 import { CardView } from "nativescript-cardview";
 import { isAndroid } from "tns-core-modules/platform";
 import { CourseService } from "~/app/services/course/course.service";
 import { EventService } from "~/app/services/event/event.service";
 import { PostService } from "~/app/services/post/post.service";

registerElement("CardView", () => CardView);
registerElement("PullToRefresh", () => require("nativescript-            pulltorefresh").PullToRefresh);

@Component({
    selector: "Home",
    moduleId: module.id,
    providers: [PostService, CourseService, EventService],
    templateUrl: "./home.component.html",
    styleUrls: [ "./home.css", "../../css/global.css",     "../../css/button.css", "../../css/card.css" ]
})

export class HomeComponent implements OnInit {
    posts: Array<any>;

    constructor(
    private postService: PostService,
    private courseService: CourseService,
    private eventService: EventService,
    private router: RouterExtensions,
    private activeRoute: ActivatedRoute
    ) {
        // Code
    }

    ngOnInit(): void {
        this.posts = this.postService.getPosts();
    }

    navigateToAddPost() {
        this.router.navigate(["addPost"]); // this function doesnt work
    }

    refreshList(args) {
        const pullRefresh = args.object;
        // tslint:disable-next-line:only-arrow-functions
        setTimeout(function() {
           pullRefresh.refreshing = false;
        }, 1000);
    }
}

addPost.component.ts

import { Component, OnInit } from "@angular/core";
import { PostService } from "~/app/services/post/post.service";

@Component({
    selector: "addPost",
    moduleId: module.id,
    providers: [PostService],
    templateUrl: "./addPost.component.html",
    styleUrls: ["../../../css/global.css", "../../../css/button.css", "../../../css/card.css"]
})

export class AddPostComponent implements OnInit {
    constructor(
        private postService: PostService
    ) {
        // Code
    }
    ngOnInit(): void {
        // Code
    }
}

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { EducationComponent } from "./pages/education/education.component";
import { AddPostComponent } from "./pages/home/addPost/addPost.component";
import { HomeComponent } from "./pages/home/home.component";
import { ItemDetailComponent } from "./pages/item-detail/item-detail.component";
import { NotificationComponent } from "./pages/notification/notification.component";
import { ProfileComponent } from "./pages/profile/profile.component";
import { SearchComponent } from "./pages/search/search.component";

export const COMPONENTS = [
    EducationComponent,
    HomeComponent,
    ItemDetailComponent,
    SearchComponent,
    NotificationComponent,
    ProfileComponent,
    AddPostComponent
];

const routes: Routes = [
    { path: "",
    // tslint:disable-next-line:max-line-length
      redirectTo:         "/(homeTab:home//educationTab:education//searchTab:search//notificationTab:notification//profileTab:profile)",
  pathMatch: "full"
    },

    { path: "home", component: HomeComponent, outlet: "homeTab" },
    { path: "education", component: EducationComponent, outlet: "educationTab" },
    { path: "search", component: SearchComponent, outlet: "searchTab" },
    { path: "notification", component: NotificationComponent, outlet: "notificationTab" },
    { path: "profile", component: ProfileComponent, outlet: "profileTab" },

    { path: "addPost", component: AddPostComponent},

    { path: "item/:id", component: ItemDetailComponent, outlet: "homeTab" }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

我想在home.component.ts中有一个导航到addPost.component的函数

在<page-router-outlet>内部的组件之间导航

0 个答案: