除登录页面外,我在每个页面上都有一些我想要的元素.当用户在登录页面上时,我想使用ngIf或可能的元素的隐藏属性来隐藏这些元素.
我试过这个:
<div [hidden]="router.isRouteActive(router.generate('/login'))">
基于这个问题和答案:在Angular 2中,您如何确定活动路线？
并且还试过这个:
<div *ngIf="!router.isRouteActive(router.generate('/login'))">
但没有取得任何成功.
这里参考的是与此html匹配的组件.
import { Component, OnInit } from 'node_modules/@angular/core';
import { HTTP_PROVIDERS, XHRBackend } from 'node_modules/@angular/http';
import { Routes, Router, ROUTER_DIRECTIVES } from 'node_modules/@angular/router';
import { LoginService } from './login/login.service';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
@Component({
selector: 'portal',
templateUrl: 'portal/portal.component.html',
directives: [ROUTER_DIRECTIVES, LoginComponent, UserComponent ],
providers: [
HTTP_PROVIDERS,
LoginService
]
})
@Routes([
{ path: '/login', component: LoginComponent},
{ path: '/user/:username', component: UserComponent}
]) …我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线？
现在我这样做:
<a [routerLink]="['/Profile/Feed', {username: username}]"
[ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
Feed for {{username}}
</a>
在我的组件内:
getLinkStyle(path:string):boolean {
console.log(this._location.path()); // logs: '/profile/john_doe/feed'
return this._location.path() === path;
}
这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数？
我有一个带有几个嵌套子视图的Angular 2应用程序.但它会显示在同一页面上router-outlet.
const routes: Routes = [
{
path: 'queue/:date/:offset/:type',
component: BundleListComponent,
resolve: {
response: BundleListResolve
},
children: [
{
path: ':bundleId', component: PointListComponent,
resolve: {
response: PointListResolve
},
children: [
{
path: ':pointId', component: TaskListComponent,
resolve: {
response: TaskListResolve
},
children: [
{
path: ':taskId', component: TaskDetailComponent,
resolve: {
response: TaskDetailResolve
}
},
{ path: '', component: EmptyComponent }
]
},
{ path: '', component: EmptyComponent }
]
},
{ path: '', component: EmptyComponent }
]
}, …我想在我的Angular2应用程序中使用Semantic UI.问题是我找不到更改默认名称"router-link-active"类的路由器设置.我需要它被称为"活动"才能使菜单正确显示.
据我了解,这种设置不存在.我在Vue.JS中看过它,所以我希望它也在那里.请求开发人员解决这个问题是个好主意吗？
所以.我们需要编写一个自定义指令,将"active"类添加到具有"router-link-active"类的所有DOM元素,但我也遇到了一些问题.
有一个类似的问题,但答案太复杂,不适合我.所以我读了一些文档,决定做更好的事情:
commons.ts:
@Directive({
selector: '.router-link-active',
host: {'[class.active]': 'trueConst'} //just 'true' could also work I think...
})
export class ActiveRouterLinkClass {
trueConst: boolean = true; //...if 'true' works we don't need this
}
然后我将ActiveRouterLinkClass导入到我的main.component.ts并将其添加到组件的指令列表中.不幸的是,现在我有这个错误:"EXCEPTION:组件'Main'视图上的意外指令值'undefined'".请解释我做错了什么!
在 angular2 中进行子路由时面临的问题是如何突出显示活动路由。我知道我们可以使用父路由
routerLinkActive="active"
但是在子路由的情况下，我必须突出显示父路由和子路由。这该怎么做 ？
从这里参考
Angular2有一个routerLinkActive指令,如果路由处于活动状态,它会向该元素添加类.我希望在路由处于非活动状态时添加一个类.有没有办法做到这一点？
我正在尝试获取 Angular 2 中的活动链接，以便我可以在我的模板中更新我的 css。
这是我在谷歌的帮助下所做的：
export class AppComponent {
router: Router;
constructor(data: Router) {
this.router = data;
}
isActive(tab): boolean {
if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
}
return false;
}
}
我的模板如下：
<li class="some-class" [ngClass]="{active: isActive('some-route')}">
<a [routerLink]="['SomeRoute']" class="menu-item" ><span>Link1</span></a>
</li>
虽然这有效，但我注意到RouterLink 指令具有方法：isRouteActive。
这似乎是使用 this 操作链接类的明智方法。
但是我该如何使用它呢？
我routerLinkActive在我的主要路由中使用。
<a [routerLink]="/user" routerLinkActive="active">Bob</a>
当 URL 为 时/user，active类会被添加到a标签中，但在主路由下，我还有一些辅助路由，所以当 URL 为 时/user/aa，将删除 active。
我希望当 URL 是/user/aaor 或 时/user/bb，主路由的类active仍然存在。
我该怎么办？
在 angular 中，我试图确保我所在的页面在导航栏上突出显示 - 我认为这可能是我正在使用的引导程序导航的本机，但它似乎不起作用。
导航
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<a class="navbar-brand" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<a class="nav-link" [routerLink]="['/']" style="color:white"><fa-icon [icon]="faHome"></fa-icon> Home</a>
<a class="nav-link" [routerLink]="['/results']" style="color:white"><fa-icon [icon]="faSearch"></fa-icon> Search</a>
<a class="nav-link" [routerLink]="['/links']" style="color:white"><fa-icon [icon]="faLink"></fa-icon> Links</a>
</nav>
是否有 css 脚本或我可以用来实现这一目标的东西？