如何从Angular 2中的内部组件进行路由?

时间:2016-03-28 18:44:54

标签: javascript html angular angular2-routing

所以我对Angular 2很新,我决定在我的一个项目中使用它来熟悉它。所以我的情况是这样的:我正在尝试制作单页仪表板应用程序,我目前有3个组件:AppSidebarNavbar以及我的{{ 1}}(我网站的主页面仪表板区域)。基本上我需要使用导航栏和侧边栏中的MainPage,它需要更改App组件上的[routerLink]="['destination']"。我觉得有一些明显的东西让我失踪了。我该怎么做呢?我的文件目前看起来像这样:

app.component.ts

<router-outlet>

Navbar.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import {NavbarComponent} from './navbar.component.ts'
import {SidebarComponent} from './sidebar.component.ts'
import {MainPageComponent} from './mainpage.component.ts'

@Component({
selector: 'application',
template: `
    <navbar></navbar>
    <sidebar id="sidebar-wrapper"></sidebar>

    <!-- I need to do this, but in the sidebar and navbar components -->
    <a [routerLink]="['Home']">Home</a>

    <button (click)="goBack()">Back</button>
    <router-outlet></router-outlet>
    `,
    styleUrls: ['css/navigation.css'],
    directives: [ROUTER_DIRECTIVES, NavbarComponent, SidebarComponent, MainPageComponent],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    {
        path: '/home',
        name: 'Home',
        component: MainPageComponent
    }
])

export class AppComponent { 
    goBack() {
        window.history.back();
    }
}

`

1 个答案:

答案 0 :(得分:2)

不要将$sql = "INSERT INTO reportes (idFolio, fechaFolio, nMaquinas, descPedido, tareaLogistica1 ,tareaLogistica2,tareaLogistica3,tareaLogistica4,tareaLogistica5Date,descLogistica,tareaServicio1, tareaServicio2Date,descripcionServicio) VALUE ('$id_Folio','$fecha_Folio','$n_Maquinas','$desc_Pedido','$servicio1','$servicio2', '$servicio3','$servicio4','$fechaDeFinalizacion','$logisticaDesc','$envio1' ,'$fechaEntregaReporte' ,'$envio2')"; if(!mysqli_query($conn,$sql)) { echo'not inserted'; } else { echo'inserted'; } 添加到组件中。 providers: [ROUTER_PROVIDERS]只应添加到ROUTE_PROVIDERS

如果您将bootstrap(...)添加到ROUTER_PROVIDERS ROUTER_PROVIDERS providers: [...] of a component, new instances are maintained for this component and it's descendants, this breaks the connection to the global router (引导程序(AppComponent,[ROUTER_PROVIDERS])added to bootstrap()`,而不是其他任何地方。