我正在设置一个使用Angular2进行路由的规范.这是应用程序组件:
import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Search} from './search/search';
import {SearchResults} from './search-results/search-results';
@Component({
selector: 'my-app'
})
@View({
template: `<div>
<router-outlet></router-outlet>
</div>`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/search', name: 'Search', component: Search, useAsDefault: true},
{path: '/search-results', name: 'SearchResults', component: SearchResults}
])
export class App {
}
这是包含导航的搜索组件:
import {Component} from 'angular2/core';
import {Router} from "angular2/router";
@Component({
template: '<div></div>'
})
export class Search {
constructor(public router: Router) {}
onSelect(station:Station):void {
this.router.navigate(['SearchResults']);
}
}
搜索结果组件:从"angular2/core"导入{Component};
@Component({ …检查ACL访问后,需要根据"routerLink"隐藏菜单中的链接.我不想在app中的每个元素链接上使用angular指令"*ngIf"(需要在routerConfig定义上做全局)
内容可以在组件上使用注释@CanActivate进行控制,但需要隐藏菜单中的链接
我试着用覆盖"routerLink"指令来做,但是在这个指令中,覆盖后无法访问我在routerConfig中定义的扩展参数(资源和特权)
例:
@Component({})
@RouteConfig([{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
data: {'resource':'account', 'privilage':'show'}
}])
但无法访问"routerLink"中的此配置数据(routerData).
有些想法怎么做？
第二版
多级菜单和stiil在从routerConfig定义访问(扩展数据配置)时遇到问题.
主要成分
@RouteConfig([
{ path:'/dashboard', name: 'DashboardLink', component: DashboardComponent, data: { res: 'dasboard', priv: 'show'}, useAsDefault: true },
{ path:'/user/...', name: 'UserLink', component: UserComponent, data: { res: 'user', priv: 'show'} },
])
@Component({
selector: 'main-app',
template: `
<ul class="left-menu">
<li><a secured [routerLink]="['UserLink']">User</a>
<ul>
<li><a secured [routerLink]="['ProfileLink']">Profile</a></li>
</ul>
</li>
<li><a secured [routerLink]="['HomeLink']">Home</a></li> …只要承诺尚未解决,我想阻止访问路由.另外,我想将该promise的返回值传递给路由组件.
SO上的几个帖子建议使用这个OnActivate接口.该文件说:"如果routerOnActivate返回一个承诺,路线变化将等到承诺平息实例化和启动子组件 ".听起来很完美,只有路线仍然会立即激活...(是因为它是Route2 的子组件会等待承诺,而不是Route2组件本身??)
请参阅https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview.Route2组件实现了OnActivate接口,但是当您单击Route2链接时,会立即激活Route2组件.但是,URL /route2仅在承诺解决后才会更新.(在一个单独的窗口中启动Plunker以查看我的意思.)现在我不太关心URL,在解决promise之前,Route2组件根本不应该实例化.
我的另一个策略是使用@CanActivate装饰器.它更适合我的目的,"路由器调用它来确定组件是否可以实例化为导航的一部分".
这里的问题是如何将数据从@CanActivate装饰器中的promise传递给组件？
我看到人们将他们的数据写入next装饰器参数的属性,并next在routerOnActivate方法的参数中检索它.
例如在next.params(这里):
@CanActivate((next) => {
return messageService.getMessage()
.then((message) => {
next.params.message = message;
return true;
});
})
export class MyComponent implements OnActivate {
routerOnActivate(next) {
this.message = next.params.message;
}
}
或者next.routeData.data(在这里).
但是文档 …
我正在编写我的ng2测试,我遇到了一些麻烦,将Router注入我的组件进行测试.我的组件的构造函数只接受一个参数 - private router: Router.
但是,当我运行我的测试用例时,我在尝试注入路由器时遇到错误.我究竟做错了什么？谁能提供一个有效的例子？
我正在使用angular2-RC.1
这是我得到的错误:
No provider for ComponentResolver! (Router -> ComponentResolver)
这是我的测试:
import {describe, it, expect, beforeEach, afterEach, beforeEachProviders, inject} from "@angular/core/testing";
import {ReflectiveInjector, provide} from "@angular/core";
import {HTTP_PROVIDERS} from "@angular/http";
import {Router, ROUTER_PROVIDERS} from "@angular/router";
import {ROUTER_FAKE_PROVIDERS} from "@angular/router/testing";
import {Location} from "@angular/common";
import {SpyLocation} from "@angular/common/testing/location_mock";
import {Observable} from "rxjs/Observable";
import {MyComp} from "./MyComp";
describe("MyComp", () => {
let injector: ReflectiveInjector,
myComp: MyComp,
router: Router;
beforeEach(() => {
injector = ReflectiveInjector.resolveAndCreate([
HTTP_PROVIDERS,
ROUTER_FAKE_PROVIDERS, …使用ngrx/router而不是新的angular2路由器有什么好处和缺点.我目前使用弃用的beta路由器,我想评估我的机会.
我正在开发一个Angular2应用程序,我陷入了路由配置.我拒绝了路由和导航的官方文档并适当地使用它们.它具有不适当的路由结构.
-Login Page
-Home Page
|-Achievement
|-Task
我用auth guard来保护主页路由.在主页中有一个标题和链接,用于浏览子组件.目前,如果我点击一个链接,它加载整个主页与子组件,也给出了这个错误,
EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AchievementComponent'
我检查了一切,看起来是正确的,但我无法弄清楚这是什么原因.
APP-routing.module.ts
..
@NgModule({
imports:[
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate [LoggedInGuard],
children:[
{ path: 'achievement', component:AchievementComponent },
{ path: 'task', component:TaskComponent },
{ path: '', redirectTo:'achievement', pathMatch:'full' }
]
},
{ path: '', redirectTo:'home', pathMatch:'full' },
])
],
exports:[
RouterModule
]
})
export class AppRoutingModule { }
app.module.ts
@NgModule({
imports: [ …我在Angular2中遇到了路由问题.
我的问题:
请参阅下面的路由代码.第一个版本正常工作.找到路由,并且在创建routerLink时不会抛出任何错误.
但是,为什么我的第一个摘录工作,第二个不？我不想创建一个伪路径"测试"只是为了让这个工作.第二个例子是获取此错误消息.
[...]无法匹配任何路线.网址细分:'mypath'[...]
工作路线:
children: export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
redirectTo: 'test'
},
{
path: 'test',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
不工作路由:
children: export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '', …在我的角度2应用程序中,我有一个传单映射,弹出窗口绑定到onClick事件.
弹出窗口的内容有一个指向角度组件的链接.但是当我在.setContent()函数中使用routerLink时,链接不会显示.
我猜这种情况正在发生,因为.setContent()无法渲染有意义的angular 2指令.我可以用什么呢？
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
openmap: any;
constructor() { }
ngAfterViewInit() {
let openmap = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", {
attribution: 'terms and feedback'
});
let map = L.map("map", {
center: [33.2148, -97.1331],
zoom: 5,
zoomControl: true,
maxZoom: 18
}).addLayer(openmap);
let marker = L.marker([39.2148, -98.1331]).addTo(map);
let popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Facility" + "<br/>" + "<a routerLink='/view2'>" + "View Two" + "</a>")
.openOn(map);
}
map.on('click', onMapClick);
} …如何设置路由以便我的参数可以使用斜杠？
例如:myapp.com/file/rootfolder/subfolder/myfile
这不起作用:
const SECTION_ROUTES: Routes = [
{ path: 'file/:path', component: FileStoreComponent }
];
路由参数值是否可用？
我读过有关使用URL编码的URL方法.但是,我希望我的用户能够输入URL.
我在使用angular的路由导航方法时遇到问题。我有两个组件：LoginComponent和HomeComponent。当我单击“ login.component.html”中的按钮时，我想重定向到“ home.component.html”。
app.module.ts
从“ @ angular / platform-browser”导入{BrowserModule}；
从'@ angular / core'导入{NgModule};
从'./app.component'导入{AppComponent};
从'./home/home.component'导入{HomeComponent};
从“ ./login/login.component”导入{LoginComponent}；
从“ @ angular / router”导入{RouterModule，Routes};
const路线：路线= [
{路径：“家”，组件：HomeComponent}
];
@NgModule（{
声明：[
AppComponent，
HomeComponent，
LoginComponent
]，
进口：[
BrowserModule，RouterModule.forRoot（routes）
]，
提供者：[]，
引导程序：[AppComponent]
}）
导出类AppModule {}
login.component.html
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes } from '@angular/router';
const routes: …