标签: angular2-routing

我有一个简单的应用程序,当我尝试导航到路线时,我有一个问题.我的主要内容:

    @Component({
    selector: 'my-app',
    template: `
    <ul class="my-app">
        <li>
            <a [routerLink]="['Login']">Login</a>    
        </li>
        <li>
            <a [routerLink]="['Projects']">Projects</a>  
        </li>
    </ul> 
     <br>
    <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
    {
        path: '/Login',
        name: 'Login',
        component: LoginFormComponent,
        useAsDefault: false
    },
    {
        path: '/Projects',
        name: 'Projects',
        component: ListProjectsComponent,
        useAsDefault: true
    }
 ])

    export class AppComponent { ...
    ...

我有一个基本的组件

@Component({
    selector: 'login-form',
    template: 
      `
        <button (click)="goToProjects()">Go To Projects!</button>
      `,
    directives: [ROUTER_DIRECTIVES],
    providers: [LoginService, ROUTER_PROVIDERS]
})

export class LoginFormComponent implements OnInit {
...
 goToProjects(){
         let link = …

当我点击撰写按钮以打开电子邮件模板时（例如；当点击撰写邮件时在 gmail 中给出），在单页中使用多个模板的辅助路由。

问题是：如何在单击十字按钮时删除或停用此辅助路由。

应用程序

   @RouteConfig([
    {
     path: '/',
     name: 'OpportunityList',
     component: OpportunityComponent,
     useAsDefault: true
    },
    {
     path: '/detail',
     name: 'Detail',
     component: DetailComponent
    },
    {
     aux: '/mailer', 
     name: 'Mailer', 
     component: MailerComponent
     }
   ])

应用程序.html

    <a [routerLink]="['/', ['Mailer'] ]" >Compose</a>

邮件程序组件.ts

   export class MailComponent implements OnInit{
      closeEmail(){
          console.log("please suggest me to Deactivate this template")
       }
    }

邮件程序.component.html

   <div class="header with-bord">
     <h3 class="title">New Message <a (click)="closeEmail()" class="close"><i class="fa fa-times"></i></a></h3>
    </div>

我已经创建了一个服务,它有一个将发出一个事件的流$,我希望在app.component激发流$ emit后,子组件<router-outlet></router-outlet>将能够订阅它,但现在我遇到的问题是即使它在构造函数中订阅它,订阅回调永远不会被触发.

我想知道这是否与通过流服务发送事件时不同？

什么是最佳做法？

我一直在玩Angular 2中的路线,但我遇到了一个我无法找到答案的问题.我的路线"工作",但不是我希望的方式.我试图使用这个,就像你使用角度1的ng-view,我的页眉和页脚永远不会改变,当我的网址改变时,新的"东西"放在我的内容中.

这就是我现在所拥有的"工作"

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/header/header.component';
import { ContentComponent } from './shared/content/content.component';
import { FooterComponent } from './shared/footer/footer.component';
import { TestComponent } from './components/test.component';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

@Routes([
    {path: '/test', component: TestComponent }
])
@Component({
    selector: 'app',
    template: `<header></header>
    <a [routerLink]="['/test']">Click for testComponent</a>
    <router-outlet></router-outlet>
    <footer></footer>`,
    directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES]
})
export class AppComponent { }

我想要做的是把路由器插座放在我的内部,ContentComponent这样路由器只是将新的东西直接转储到我的应用程序的主要区域.当我尝试重写时:
<router-outlet></router-outlet>
由于
<content><router-outlet></router-outlet></content>
路由停止工作,没有错误消息,只是停止.当我用devtools检查它时,我也没有在DOM中看到我的testComponent.所以我想,我会将路由器插座放在我ContentComponent喜欢的模板中:

import …

使用带有更新的@angular/router 的 Angular 2 RC 4，我使用此问题中的答案在浏览器中显示了路由 URL

但是，当我刷新或直接请求使用非默认路由的页面时，它会将我带到默认页面（就像我请求 index.html 一样）而不是我想要的路由页面。如何使用 Apache 2.4 在页面刷新时使 Angular 2 路由正常工作？

路由和引导程序：

const routes: RouterConfig = [
{ path: '', redirectTo: 'dashboardTab', terminal: true },
{ path: 'dashboardTab', component: DashboardComponent },
{ path: 'missionTab', component: MissionComponent, children: childRoutes }];

bootstrap(NavbarComponent, [disableDeprecatedForms(), provideForms(),   provideRouter(routes), {provide: Window, useValue: window}, HTTP_PROVIDERS, ResponsiveState, {provide: PLATFORM_DIRECTIVES, useValue: RESPONSIVE_DIRECTIVES, multi: true}]).catch((err: any) => console.error(err));

index.html 中的基本 href： <base href="/">

我知道如何导航添加其他参数到路由器,例如:

this._router.navigate(['/users', { page: 2 }]);

将导致导航/users;page=2.

但我想做的是能够修改这些参数而无需实际导航.只需更改URL即可更新/添加参数.

这可能很有用,例如在显示表格时,用户更改排序键或添加过滤器.

Angular2有一个routerLinkActive指令,如果路由处于活动状态,它会向该元素添加类.我希望在路由处于非活动状态时添加一个类.有没有办法做到这一点？

我已经发布了Angular2应用并将其部署在Azure Web Apps上。如果通过浏览到其根目录来启动该应用程序，则该应用程序可以正常工作：http : //cafeserver.azurewebsites.net/Web/

但是，如果我直接浏览到应用程序中的子路由，例如以下示例：http : //cafeserver.azurewebsites.net/Web/customers

它将引发错误，指出“您没有查看此目录或页面的权限”。

我该如何解决这个问题？

基于此处的LINK-在我的应用中，我已路由：

const routes: Routes = [
 { path: 'blog/:id', component: BlogComponent },
 { path: 'blog/moo', component: MooComponent },
];

并且有以下信息：

如果我们访问/ blog / moo，即使它也匹配第一个blog /：id路径的路径，我们也会显示MooComponent。

重要说明：非参数化路由优先于参数化路由。

不幸的是，它不能那样工作。如果我要转到url，blog/moo则路由将moo视为Id并且将打开BlogComponent。

我想知道如何解决我有两个想法：

1. 我可以改变路径。博客 / id和博客 / moo。

2. 我可以使用UrlMatcher，但是当我更改previos url段时可能会有些问题。因此，此功能应做好充分的准备。

你怎么看？有任何想法吗？

我通过以下命令用2条路线构建了一个简单的angular应用程序：

ng build --aot --prod --base-href ./

然后我打开index.html位于dist文件夹中的文件，应用程序运行，但是路由不起作用，并且在控制台上收到以下警告：

希望能很好地解释我的问题。提前致谢。