我正在运行Angular 2 beta.0而且我正在搞乱路由.这就是我所拥有的
AppComponent:
import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/common';
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import {RouteConfig, Location, LocationStrategy, HashLocationStrategy, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {HomeComponent} from './components/home';
import {RowsComponent} from './components/rows';
import {ColumnsComponent} from './components/columns';
import {TableComponent} from './components/table';
@Component({
selector: 'app',
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES],
templateUrl: '/app/views/root.html',
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{path:'/', name: 'Home', component: HomeComponent},
{path:'Rows', name: 'Rows', component: RowsComponent},
{path:'Columns', name: 'Columns', component: ColumnsComponent},
{path:'Table', name: 'Table', …我正在阅读Angular 2的教程,并且能够启动并运行一个简单的应用程序.现在,我正在转到这里的路由和导航部分https://angular.io/docs/ts/latest/guide/router.html,但有些东西对我不起作用.
我去了Plunker的实例,并从那里下载了代码.然后,我在Visual Studio 2015中设置了一个解决方案,并插入了Plunker下载的所有代码.该应用程序完美地工作,除了一件事,导航似乎没有工作,因为文档似乎表明.
我开始使用IIS Express和Chrome浏览器在Visual Studio中调试应用程序.主页面加载正确,我可以点击危机中心和英雄的链接.当我单击链接时,组件视图正确加载,一切看起来都很完美.
现在,如果我尝试通过简单地键入URL来导航,则组件视图不会加载,我所拥有的只是一个空白页面.
例如,我开始在Visual Studio中调试应用程序,并使用URL http:// localhost:56074 /打开Chrome浏览器.主页面正确加载"组件路由器"标题和"危机中心"和"英雄"的两个链接.现在,如果我只是转到地址栏并在URL的末尾添加"/ crisis-center",使其看起来像http:// localhost:56074/crisis-center,我会得到一个空白页面.Chrome控制台显示以下错误:
获取http:// localhost:56074/crisis-center 404(未找到)导航到http:// localhost:56074/crisis-center
网络追踪清楚地显示了404危机中心.事实上,如果我使用危机中心主页面上的导航链接并点击它来显示危机中心组件视图,然后只需点击刷新按钮刷新页面,而在危机中心视图中,同样的结果发生.
这是一个Visual Studio问题吗？IIS Express？其他想法？
我们是.Net开发商店,我们的主要开发环境是Visual Studio.如果这是使用IIS Express在Visual Studio中开发Angular 2应用程序的问题,这可能是一个显示停止.
如果有人想尝试同样的事情,我可以压缩我的VS解决方案并分享.
有人尝试使用IIS Express在Visual Studio中使用Angular 2应用程序,它可以告诉我我做错了什么吗？
我目前有一个Angular 2应用程序正在运行,如下所示:
访问该站点时,App.component被引导.App.component的模板具有所有组件标记(例如menu.component,search.component和router-outlet).
我基本上需要的是:目前访问者被直接重定向到登录页面,因为用户需要登录.他仍然能够看到菜单和仅适用于登录用户的所有组件.添加额外模板层的最佳策略是什么,因此未登录的用户会被重定向？
基于Angular 2 的文档,您可以使用@Input轻松地将数据从组件传递到另一个组件.
例如,我可以像这样设置父级:
import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
selector: 'hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</hero-child>
`
})
export class HeroParentComponent {
heroes = HEROES;
master: string = 'Master';
}
并获取子组件中的数据,如下所示:
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export …我希望在我的应用程序中有以下路由:
export const routes: Routes = [
{
path: ':universityId',
component: UniversityComponent,
children: [
{ path: 'info', component: UniversityInfoComponent },
{ path: 'courses/:status', component: CoursesByStatusComponent }
]
}
]
作为上/1/info或/1/courses/open网址,我该如何改变:universityId只UniversityComponent？
简单router.navigate(['../', 2], {relativeTo: currentRoute })不会这样做,因为它重定向到/2,丢失所有其他信息.使用'../2/courses/open也不是一种选择 - 那时我可以在任何儿童路线上.我能想到的最好的是:
const urlTree = this.router.parseUrl(this.router.url);
urlTree.root.children['primary'].segments[0].path = '2';
this.router.navigateByUrl(urlTree);
但它有点难看
以下是plunker:https://plnkr.co/edit/WIFNVIEVqls4gXk21Muj
有两个模块都定义了路由.模块2导入模块1以便使用其中的组件.您永远无法导航到模块2.而是加载模块1.
模块1路由:
const routes: Routes = [
{ path: '', component: Module1Component }
];
模块2路由:
const routes: Routes = [
{ path: '', component: Module2Component }
];
应用路由:
const routes: Routes = [
{ path: 'module1', loadChildren: 'app/module1/module1.module#Module1Module' },
{ path: 'module2', loadChildren: 'app/module2/module2.module#Module2Module' }
];
谢谢.
我正在通过Angular 2开发一个MEAN项目,我正在设置各种页面的路由.我已经看到很多使用ModuleWithProviders进行路由的示例,而不是使用NgModule的angular.io示例(https://angular.io/guide/router)
这是标准的做事方式？如果其中任何一个是可以接受的,两者之间是否存在性能差异？
ModuleWithProviders示例:
import { ModuleWithProviders } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';
export const router: Routes = [
{ path: '', redirectTo: 'about', pathMatch: 'full'},
{ path: 'about', component: AboutComponent },
{ path: 'services', component: ServicesComponent }
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
NgModule示例:
import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import …我对 Angular 2 及其依赖注入能力有点陌生，但还没有找到一种简单的方法来基于路由更改组件依赖。
IE 给定一个接受服务的组件。
MyReusableComponent {
constructor(private service: ServiceIWantToChange){}
}
鉴于我在 Web 应用程序的不同部分添加了一个新路由，该路由将重用该组件。
我想做这样的事情：NewAreaRoutingModule
{
path: "newRoute",
component: MyReusableComponent,
** my made up provider area ** -providers: [{provide:
ServiceIWantToChange, useClass: MyServiceWithChanges}]
}
这就是我想到的一种处理位置敏感依赖项的方法。
我以为我可以提供组件的覆盖实现，为可重用组件提供新的依赖，但我希望只更改路由中的依赖项。
我一直在围绕解析器等进行研究，但这些似乎更多地用于提供数据。我还注意到有人注入了注入器并进行了 if 检查以获取正确的组件。看到了几种不同的方式。我确信我在路由和 DI 方面遗漏了一些东西，但我找不到任何简单的东西。我知道有变通办法，但希望找到一个更优雅的解决方案，只是想知道我想要做什么甚至是可能的。
谢谢！
以下是用例详细信息，以防我在一般情况下遇到这个错误......在系统的一个区域中，我想使用一项服务，该服务命中服务器上的一个版本的其余端点，而在我想要的系统的另一部分重用完全相同的组件，但让它将其请求发送到一组不同的端点。
我有以下not working代码（在一些不完整的示例中找到）：
<nav mat-tab-nav-bar>
<a mat-tab-link *ngFor="let device of devices$ | async" [routerLink]="device.getIp()"
[routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
</a>
</nav>
<router-outlet></router-outlet>
我不确定这应该如何工作：
routerLinkActive在我的 中定义吗ts？[routerLinkActive #rla="routerLinkActive"意思？在我的应用程序中，用户登录后有一个主页和一些其他页面。问题是，当我进入其中一个其他页面并刷新该页面时，它会再次将我发送到主页。这是我的Routes：
const routes: Routes = [
{
path: '', redirectTo: '/home', pathMatch: 'full'
},
{
path: 'login', component: LoginComponent
},{
path: 'list', component: ListComponent, canActivate : [AuthGuardService]
},{
path: 'home', component: HomeComponent, canActivate : [AuthGuardService]
},{
path: 'detail/:id', component: HomeComponent, canActivate : [AuthGuardService],
},{
path: '**', redirectTo: 'login' ,pathMatch: 'full'
}
];
应用程序组件具有路由器出口
<div [ngClass]="{'container': (isLoggedIn$ | async), 'mt-2': (isLoggedIn$ | async)}" class="h-100">
<router-outlet></router-outlet>
</div>
那么，我期望什么？首先，如果我在“列表”页面 ( localhost:4200/list) 并刷新此页面，它应该保留在那里。在那一页里。但现在它将我重定向到localhost:4200/home. 当然，当我单击列表项时，它应该将我发送到localhost:4200/detail/itemId但它总是将我发送到家。谢谢
使用 AuthGuardService 进行编辑： …