我有canActivate angular2.0.0-rc.3的问题.
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>{
console.log('canActivate with AclService');
// return true;
return Observable.create((observer:Subject<boolean>) => { observer.next(true); });
}
它不适用于Observable响应,但使用简单的布尔响应.
我怎么能解决这个问题？
我正在使用Observable<boolean>返回canActivate().设置了以下功能进行测试,并且正确解析,显示组件.
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return Observable.from([{ admin: true }]).map(x =>
{
if (x.admin) return true;
return false;
});
}
但是,实际代码的行为是我保留在登录组件上,尽管控制台输出指示应该激活路由.上面测试的唯一真正区别是我正在调用服务this.auth.isAdmin()而不是使用Observable.from.结果this.auth.isAdmin()是Observable<boolean>值为true.
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
const isAdmin$ = this.auth.isAdmin();
return isAdmin$.map(x =>
{
console.log('isAdmin returned ' + x);
if (!x) {
console.log('redirectToLogin');
this.auth.redirectToLogin(state.url);
return false;
} else {
console.log('canActivate = true');
return true;
}
});
}
这是路由:
{
path: 'admin',
canActivate: [AdminGuard],
children: [ …我现在正在完成我的Angular 2应用程序,我想知道如何托管它.
我刚刚尝试在我的localhost上构建应用程序,实际上一切似乎都运行良好,期待Router应用程序.我无法通过重写URL来访问路由,因为它可能正在寻找一些文件和.htaccess RewriteRules,而不是routes.能够通过重写URL来访问路由对我来说很重要,因为我不希望[routerLink]我的管理面板和其他一些东西被公开(被视为超链接).
更具体一点......当我访问http://localhost/FinalApp/它时,使用路由器导航我,http://localhost/FinalApp/list/page/1以便list/page/1由Angular 2路由器添加.所有人[routerLink]都正常工作,并导航我到例如.http://localhost/FinalAll/list/category/3当我点击它们,但当我手动重写URL以进入管理面板(我正在添加admin到我的基础http://localhost/FinalApp/,所以最终的URL看起来像http://localhost/FinalApp/admin)它显示404错误(不是路由器的默认路由,但服务器 - 404).
我希望能够手动重写URL并使用Angular 2 Router.
我错过了什么或者它是不可能的？
我制作了角度2的两个不同组件.我正在学习这个链接的路由 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
我制作了两个组件.在第一个组件中,我有一个按钮,我想移动到第二个组件
这是我的代码 https://plnkr.co/edit/GBOI9avZaPGaxaLQbtak
我定义这样的路线
const routes =[
{
path: 'ft',
component: First
},
{
path: 'sd',
component: Second
}
]
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App,First ,Second]
})
我在用 <router-outlet>
但我无法将一个组件移动到另一个组件
我有以下问题。我制作了一个CanActivate Guard，可以在其中登录到“债务”组件。我的问题是，当我登录后，我想将用户重定向到债务组件（因为RegistrationComponent是默认组件），但是却无法正常工作（实际上我的页面正在阻塞。而且我无法执行任何操作）。我的CanActivate函数
export class AuthGuardService implements CanActivate {
constructor(private router: Router) { }
canActivate(): Promise<boolean>{
return checkIfAuth().then(() => {
setLoggedIn(true);
this.router.navigate(['/debts']); // <- broken :(
return true;
}).catch(() => {
setLoggedIn(false);
this.router.navigate(['/login']); // <- broken :(
return false;
})
}
}
export function checkIfAuth () {
return new Promise((resolve, reject) => {
firebase.auth().onAuthStateChanged((user) => {
if(user){
return resolve(true);
}
else{
return reject(false);
}
})
})
}
任何我的应用程序路由
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/registration', pathMatch: 'full' }, …我有两个组件A和B,其中组件A包含一个按钮.我希望当用户点击此按钮时,在组件B上触发一个功能
<A></A>
<router-outlet></router-outlet>
并且组件B使用routing进行渲染.我正在考虑使用具有可观察布尔值的服务,该服务指示是否单击了A中的按钮.这是实现它的正确方法吗？
有谁知道为什么链接#1和#2工作但链接#3不工作？
<a [routerLink]="['/contact']">Contact Solo</a> |
<a [routerLink]="[{ outlets: { aux: 'aside' }}]">Aux Solo</a> |
<a [routerLink]="['/contact', { outlets: { aux: 'aside' }}]">Contact + Aux</a>
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
换句话说:我可以单独激活主路由(链路#1),我可以单独激活辅助路由(链路#2),但我不能同时激活主路由和辅助路由(链路#3).链接#3仅激活主路由,但在控制台中不会触发错误.
有趣的是,单击链接#1然后链接#2产生我想要的(主路由和辅助激活)与路径,contact(aux:aside)而链路#3具有路径contact/(aux:aside)(注意/).
Plunkr:https://plnkr.co/edit/WqTRjux7muHjalIL3rsL ？ p = preview
路线声明:
const appRoutes: Routes = [
{
path: 'contact',
component: ContactComponent,
},
{
path: 'aside',
component: PopupComponent,
outlet: 'aux'
}
];
我尝试了多种组合和语法无济于事.
编辑:
我是混合开发的新手.我引用这个Sample来使用ionic2解析listview中的json.但是当我运行代码时,我只能看到浏览器中的空白屏幕.
下面我发布了代码.请检查 :
pages.ts:
import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
@Component({
selector: 'page-home',
templateUrl: 'pages.html'
})
export class SlidingPage {
public items:any;
constructor(public navCtrl: NavController,public http: Http) {
this.http = http;
this.http.get("http://api.randomuser.me/?results=10")
.subscribe(data =>{
// console.log(data['_body']);
// this.items=JSON.parse(data['_body']).results;//Bind data to items object
this.items = data.json();
},error=>{
console.log(error);// Error getting the data
} );
}
buttonClick(event){
console.log("button clicked");
console.log(event);
}
itemClicked(event,itemData){
console.log("item clicked");
console.log(event);
console.log(itemData);
} …在我的Angular 5项目中，我有一个引导导航栏菜单。routerLinkActive当路径的开头与菜单的routerlink匹配时，效果很好，例如：
<li [routerLinkActive]="['active']">
<a [routerLink]="['/entity/teacher']">Teacher</a>
</li>
上面的代码可以很好地激活菜单项“ / entity / teacher / add”等等
问题是，我有一种“包罗万象”的导航项，其中包含不排队的内容：
<li [routerLinkActive]="['active']">
<a [routerLink]="['/config']">Configuration</a>
</li>
我想这个项目，以突出的路径/tasks和/entity/settings也一样，不仅对/config。
问题是，我无法更改应用程序的路由。如何获得菜单项以排队其他路由路径以及routerLink中的菜单项？