Question

Angular2路由的每个主题都有一个固定的导航栏

<nav>
    <a [routerLink]="['/component-one']">Component One</a>
    <a [routerLink]="['/component-two']">Component Two</a>
</nav>
<router-outlet></router-outlet>

因此，当点击指向第一部分的链接时，此组件将呈现在<nav></nav>

下面

我需要的是当您点击第一部分时，完整视图（整页）会更改为第一部分的视图（因此没有<nav></nav>）

我尝试将<router-outlet>放在单独的@Component

中

// view.component.ts    
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'view',
    template:`<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})

export class ViewComponent {

}

然后

// home.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'home',
    template: `
        <nav>
            <a [routerLink]="['/component-one']">Component One</a>
            <a [routerLink]="['/component-two']">Component Two</a>
        </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class HomeComponent {

}

App组件如下所示：

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { HomeComponent } from './containers/home.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
  <h1>{{title}}</h1>
  <view></view>
  <home></home>
  `,
  styleUrls: ['app.component.css'],
  directives:  [HomeComponent, ROUTER_DIRECTIVES]
})
export class AppComponent {
  title = 'app works';
}

还尝试将<home>置于<view>内但没有

总是得到同样的错误：

错误：无法找到加载'OneComponent'的主要插座

任何可以帮助我的人？ THX！

修改的

// app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';

import { ViewComponent } from './containers/view.component';
import { HomeComponent } from './containers/home.component';
import { OneComponent } from './containers/one.component';
import { TwoComponent } from './containers/two.component';

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    },
    { 
        path: '', 
        component: HomeComponent, 
    },
    { 
        path: 'one', 
        component: OneComponent 
    },
    { 
        path: 'two', 
        component: TwoComponent 
    }
];

export const appRouterProviders = [
    provideRouter(routes)
];

Answer 1

将路由移至自己的组件

<nav>
    <a [routerLink]="['/component-one']">Component One</a>
    <a [routerLink]="['/component-two']">Component Two</a>
</nav>

并将它们注入您想要的组件上，当您路由到该组件时，您将看到导航，当您转到另一个组件时，它们将从那里移除。

此<router-outlet></router-outlet>之上或之下的所有内容将在每个页面中提供

Answer 2

您的routerLinks路径错误：

<nav>
  <a [routerLink]="['/component-one']">Component One</a>
  <a [routerLink]="['/component-two']">Component Two</a>
</nav>

与路由器配置路径相比

 { 
    path: 'one', 
    component: OneComponent 
},
{ 
    path: 'two', 
    component: TwoComponent 
}

将它们修复为：

<nav>
  <a [routerLink]="['/one']">Component One</a>
  <a [routerLink]="['/two']">Component Two</a>
</nav>

Answer 3

对于快速反应的人来说......你们都指出了我正确的方向。

<强>解决方案：

主要组件只需要另一个组件来呈现视图（<view></view>）

// app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { ViewComponent } from './containers/view.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
  <h1>
    {{title}}
  </h1>
  <view></view>
  `,
  directives:  [ViewComponent, ROUTER_DIRECTIVES]
})
export class AppComponent {
  title = 'app works!';
}

视图组件只包含<router-outlet></router-outlet>

// view.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'view',
    template:`<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})

export class ViewComponent {  
}

路线必须正确（哎呀）

// app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './containers/home.component';
import { OneComponent } from './containers/one.component';
import { TwoComponent } from './containers/two.component';

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    { 
        path: 'home', 
        component: HomeComponent, 
    },
    { 
        path: 'one', 
        component: OneComponent 
    },
    { 
        path: 'two', 
        component: TwoComponent 
    }
];

export const appRouterProviders = [
    provideRouter(routes)
];

然后它只是构建视图（页面）

// home.components.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { NavigationComponent } from './navigation.component';

@Component({
    selector: 'home',
    template: `
        <div><h1>{{title}}</h1></div>
        <navigation></navigation>
    `,
    directives: [ROUTER_DIRECTIVES, NavigationComponent]
})

export class HomeComponent {
    title = 'This is home';
}

HomeComponent中使用的导航组件：

// navigation.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'navigation',
    template: `
        <nav>
            <a [routerLink]="['/one']">Comp one</a>
            <a [routerLink]="['/two']">Comp two</a>
        </nav>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class NavigationComponent {
}

和

// one.component.ts
import { Component } from '@angular/core';

import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'one',
    template: `
        <p>ONE: {{message}}</p>
        <a [routerLink]="['/two']">GOTO Comp two</a>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class OneComponent {
    message = 'ONE comp here';
}

和

// two.component.ts
import { Component } from '@angular/core';

import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'two',
    template: `
        <p>TWO: {{message}}</p>
        <a [routerLink]="['/one']">GOTO Comp one</a>
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class TwoComponent {
    message = 'TWO here';
}

没有导航栏的角度2路由

3 个答案: