标签: angular2-routing

我使用 ionic 5 导航控制器的以下方法进行页面导航

1) this.navCtrl.navigateForward(path);
2) this.navCtrl.navigateBack(path);

但页面导航不像ionic 3中的push或pop那样流畅，有时页面会重叠。请帮我解决这个问题

我有一个多用户 Angular 应用程序，每个用户都有一个模块（因为他们有完全不同的可访问页面），如下所示：

• 应用程序模块.ts
• 应用程序路由.module.ts
• 登录/
  • 登录.组件.ts
• 行政/
  • 页数/
    • 用户管理/
    • 配置/
  • 管理模块.ts
  • 管理路由.module.ts
• 用户/
  • 页数/
    • 任务管理/
    • 配置/
  • 用户模块.ts
  • 用户路由.module.ts
• 客人/
  • 页数/
  • guest.module.ts
  • 访客路由.module.ts

从登录页面（/login来自应用程序路由），我想根据用户提供的凭据重定向到每个模块，但不/user /admin使用像或这样的子路由/guest

相反，当管理员登录时，我希望重置 URL。因此，例如，管理员不应该看到路径/admin/user-management或/admin/configuration; 它只是访问/user-management或/configuration

这可能吗？如果我有和/configuration的路线，会有问题吗？adminuser

编辑：这是一个Stackblitz 工作示例。登录后查看 URL 路由。

编辑 2：在 Stackblitz 示例中，您可以在分支上看到原始问题master和工作解决方案solution。

我在组件中有这段代码

<a *ngFor="let item of config.socialLinks" [routerLink]="[item.url]">
...
</a>

当使用app.component中定义的本地路由但是当外部路由重定向到http:localhost:5555时,这可以正常工作.http://external.com 有没有办法将routerLink用于本地路由,并将href用于外部路由？

我真的应该在这里粘贴源代码,但我不知道我应该向你展示我的组件中300行的哪一部分.

也许错误消息"EXCEPTION:错误:未捕获(在承诺中):找不到默认插座"有一般解决方案吗？我错过了一些参数或标签吗？

我在我的项目中使用了angular2和laravel 5.3.在laravel中,当用户登录服务器时将发送用户的权限以处理角度授权.所以我写了一个警卫来保护无法访问的用户的路由.这是我的警卫类代码:

export class AccessGuard implements CanActivate{

permissions;
currentRoute;
constructor(private authService:AuthService,private router:Router){
    this.permissions = this.authService.getPermissions();
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.checkHavePermission(state.url);
}

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    return this.checkHavePermission(state.url);
}

private checkHavePermission(url){
    switch (true) {
        case url.match(/^\/panel\/users[\/.*]?/):
            return this.getPermission('user.view');
        case url.match(/^\/panel\/dashboard/):
            return true;
        case url.match(/^\/panel\/permissions/):
            return this.getPermission('permissions.manager');
        case url.match(/^\/panel\/candidates[\/.*]?/):
            return this.getPermission('candidate.view');
    }
}


getPermission(perm){
    for(var i=0;i<this.permissions.length;i++){
        if(this.permissions[i].name == perm ){
            return true;
        }
    }
    return false;
}

}

既然路由是安全的,我想知道如何在组件类中访问用户权限.因为有时用户可以访问路线,但他看不到dom的特定部分.我该怎样处理这种情况？

我刚刚开始使用Angular Universal和全新的'isomorphic'javascript.

关于如何使用逻辑路由系统,我有点困惑,你是否打算建立角度通用作为典型的节点rest api？或者它是否只是意味着立即提供客户端代码,并从外部源/ rest api检索数据？

至于采用角度通用入门套件,例如它从这些路线开始;

app.get('/', ngApp);
app.get('/about', ngApp);
app.get('/about/*', ngApp);
app.get('/home', ngApp);
app.get('/home/*', ngApp);

然后逻辑上包括一个节点/ express/mongo api与此一起获取/发布数据？即;

const bearRoutes = require('./routes/bear')
app.use('/', bearRoutes)

如果是,那么您是否会使用散列策略来区分URL？

使用通用外部api的angular2应用程序提供数据与将所有内容托管在一起之间是否会有明显的性能差异？

谢谢你的建议!

我想为angular2应用程序配置路由.我的网址必须是这样的:

HTTP:// DOMAIN_NAME/constant_value/VARIABLE_VALUE/constant_value

网址可以是以下示例:

http://localhost/myhouse/floor1/mirror

http://localhost/myhouse/floor1/room1/mirror

http://localhost/myhouse/floor1/room1/bathroom/mirror

这里的路线/ myhouse和/ mirror是不变的.但中间部分可以是/ floor1或/ floor2 / something/something/....

如何在路由模块中为其定义路由.

const routes: Routes = [
    {
        path: 'myhouse',
        children: [
            {
                path: ..., //here how do i configure it
                children: [
                    {
                        path: '/mirror',
                        component: MirrorComponent            
                    }
                ]
            }
        ]
    }
];

如果url在url 的末尾有/ mirror,那么必须加载镜像组件,如果不加载login组件的话.将为上面显示的URL加载镜像.根据url的可变部分,每个镜像组件内部将具有不同的属性值.

对于登录组件,网址将如下:

HTTP://本地主机/的MyHouse

要么

HTTP://本地主机/的MyHouse/floor1

要么

HTTP://本地主机/的MyHouse/floor1/bathroom1

我试过想使用正则表达式,但似乎新版本的angular2不支持正则表达式.如果我错误地无法使用正则表达式,请通过示例向我指出这个方向.如果没有,请指出我正确的方向.

在router-outler我们做的事情中强制设置路线参数:

this.router.navigate(['/hero', hero.id]);

如何在命名出口中强制设置路由参数？

this.router.navigate([{ outlets:{modal: 'modal/user'} }]);

现在我连接字符串以设置路由参数:

this.router.navigate([{ outlets: {modal: 'modal/user' + '/' + 'this.id'} }]);

在angular docs FAQ部分中,它指出,"与启动时加载的模块的提供者不同,延迟加载模块的提供者是模块范围的." 链接

请问"模块范围"在这里的意思只是模块还是它扩展到包括属于该模块的所有组件吗？

我问的原因是因为我有一个带有2个属于它的组件的延迟加载模块.我在模块中注册了一个服务,但由于某种原因,每个组件都获得了该服务的不同实例.

为了在我的延迟加载模块中提供LazyModuleService并将该服务限定为延迟加载模块及其组件,我需要更改什么？请包含所需的任何其他文件.我试图做一个通用的例子来帮助其他可能找到这个问题的人.

延迟加载模块:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { LazyModuleService } from './lazy-module.service';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    Component1,
    Component2,
  ],
})

export class LazyLoadedModule { }

我们有一个要求,取决于静态/全局设置,根据客户需要为路径加载不同的组件.原因是他们希望应用程序的一部分具有稍微不同的功能,因此我们将为每个应用程序编写一个组件来满足他们的场景.有没有办法动态地/在运行时为路径选择组件并保持相同的路由/ URL.以下是我们希望实现的简化示例:

COMPONENT1:

@Component({
  selector: 'customeronecomponent',
  templateUrl: './customeronecomponent.component.html'
})

export class CustomerOneComponent implements OnInit {
}

COMPONENT2:

@Component({
  selector: 'customertwocomponent',
  templateUrl: './customertwocomponent.component.html'
})

export class CustomerTwoComponent implements OnInit {
}

路线:

{ path: 'home', component: CustomerComponentProvider },

在此实例中,CustomerComponentProvider将在内部检查设置,并返回CustomerOneComponent或CustomerTwoComponent.

在angular2/4中,这是最好的方法,或者更好的是有一个组件并在该组件上加载正确的组件,我看到的缺点是我们需要三个组件而不是两个组件.