标签: angular-router
Angular 路由器模块ActivatedRoute 在存在firstChild 时返回null
遵循托德·莫托（Todd Motto）的优秀指南之一（https://toddmotto.com/dynamic-page-titles-angular-2-router-events），我遇到了一种我无法解释的情况。
这是一些代码：
this.router.events
.filter((event) => event instanceof NavigationStart)
.map(() => this.activatedRoute)
.map((route) => {
console.log('route pre-while: ', route); // Shows ActivatedRoute object
console.log('pre-while route child: ', route.firstChild); // null
while (route.firstChild) {
console.log('while route: ', route);
route = route.firstChild;
}
console.log('post while route: ', route);
return route;
})
.subscribe((elem) => {
console.log('elem: ', elem);
});
在此代码块中，“route pre-while”日志语句在 Chrome 控制台中显示一个 ActivatedRoute 对象。如果我在 Chrome 的控制台窗口中展开该对象，我可以单击该firstChild属性并看到另一个ActivatedRoute对象，这正如我所期望的那样。然而，问题是，第二条日志语句“pre-while route child”输出null到控制台。此外，WHILE 循环永远不会执行，因为route.firstChild计算结果为null。谁能给我解释一下这是为什么？？？为什么我可以记录该对象并看到 a …
推荐指数
解决办法
查看次数
Angular - ErrorHandler 中的导航仅适用于 zone.run()
我在 Angular（版本 5.2.0）中为所有未处理的异常实现了一个全局错误处理程序。
全局错误处理程序如下所示：
import { Router } from '@angular/router';
import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
import { LoggingService } from '../services/logging.service';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
private router: Router;
constructor(injector: Injector, private zone: NgZone, private loggingService: LoggingService) {
setTimeout(() => {
this.router = injector.get(Router);
});
}
handleError(error) {
this.loggingService.logErrorToApi(error);
this.zone.run(() => this.router.navigate(['/error']));
}
}
仅当我有电话时，路由才有效this.zone.run(...)。如果我删除此调用，路由只会将路由添加error到 URL，并且不会显示组件。ngOnInit 也没有被调用。
如果我必须使用这样的“黑客”来让我的路由对我起作用，那么我的应用程序中的某个地方似乎配置错误。
有人知道我需要更改什么才能使其在没有区域呼叫的情况下运行吗？
我的路线：
const appRoutes: Routes = [
{
path: 'error',
component: ErrorComponent …推荐指数
解决办法
查看次数
ActivatedRoute 订阅第一个子参数观察者
我不确定这是否是实现此目的的最佳方法。如果您有其他意见请分享。
我必须实现一个多收件箱系统，用户可以将多封电子邮件按不同的收件箱分组。
例如：http://localhost/inbox/personal/将在收件箱中显示电子邮件列表personal，http://localhost/inbox/business/3将在收件箱中显示电子邮件列表business，并突出显示带有 id 的电子邮件：3
路线如下：
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'personal' // redirect to personal inbox
},
{
path: ':inbox',
component: InboxContentComponent, // list of emails in :inbox
children: [
{
path: '',
component: InboxNoSelectedEmailComponent, // no email selected
},
{
path: ':id',
component: InboxSelectedEmailComponent, // show selected email content
}
]
}
];
我的问题是InboxContentComponent. 我需要检测收件箱何时更改以及是否选择了电子邮件
constructor(private route: ActivatedRoute) {
}
ngOnInit() …推荐指数
解决办法
查看次数
Angular 5 在启动时根据 API 数据构建路线
我需要根据从 API（站点地图）接收的数据在 Angular 应用程序启动时创建路由。\n1. APP_INITIALIZER 调用 SettingsService.loadSettings 从 API 获取数据\n2。数据到达 ROUTES 并构建所需的路线。
\n\n应用程序模块.ts
\n\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule, APP_INITIALIZER } from \'@angular/core\';\nimport { HttpClientModule } from \'@angular/common/http\';\nimport { RouterModule, ROUTES } from \'@angular/router\';\n\nimport { AppComponent } from \'./app.component\';\nimport { MuseumComponent } from \'./museum/museum.component\';\nimport { SettingsService } from \'./services/settings.service\';\n\nexport function initSettings(settings: SettingsService) {\n return () => settings.loadSettings();\n}\n\nexport function buildRoutes(settings: SettingsService) {\n console.log(\'SettingsService.currentSettings\', settings.currentSettings);\n const routes = [];\n settings.currentSettings.site_map.forEach(element => {\n routes.push({\n path: `/${element.url}`,\n component: MuseumComponent\n });\n …推荐指数
解决办法
查看次数
一种使用 Angular Material Tab 更新 Url 的方法
Angular 6 使用 Angular Material，显示列表，使用选项卡进入项目详细信息“页面”。
我的路线很简单：
{
path: '', component: CurrenciesComponent
}
我尝试了这样的事情：
{
path: 'currencies',
canActivate: [AuthGuard],
component: CurrenciesComponent,
children: [
{ path: 'currencies/:id', component: CurrenciesDetailComponent }
]
}
我寻找解决方案，但没有解决它。也许使用材质选项卡无法实现这一点？
推荐指数
解决办法
查看次数
Angular 2路由器混合应用程序：导航后网址恢复回来
每次路线更改都会渲染正确的组件，但路径存在问题。
例如，从 /items 导航到 /add-item 更改和 url 一秒钟，然后恢复它。
无论从哪里开始，到哪里去，它都会发生在每一页上。
导航
<a routerLink="/add-item">Add item</a>
主要app.routes.ts
export const appRoutes: Routes = [{
path: 'brokers',
pathMatch: 'full',
redirectTo: '/'
},
{
path: 'sellers',
pathMatch: 'full',
redirectTo: '/'
},
{
path: 'buyers',
pathMatch: 'full',
redirectTo: '/'
},
{
data: { name: 'pageNotFound' },
path: '**',
redirectTo: '/404'
}];
主页.routes.ts
export const homeRoutes: Routes = [{
component: HomePageComponent,
data: { name: 'homePage' },
path: ''
}
页面未找到.routes.ts
export const pageNotFoundRoutes: Routes = [{
component: PageNotFoundComponent, …推荐指数
解决办法
查看次数
使用 undertow-handlers.conf 重写路径无法按预期工作
背景
带有 Angular 7 UI 的 JBoss 7.1.5 EAP 后端。
我需要让 JBoss 了解 UI 的路由，但将它们全部重写到 UI 的索引页，以便通过 Angular 进行路由。
该项目的结构如下：
webapp/
WEB-INF/
undertow-handlers.conf
web.xml
...etc
login/
background.jpg
login.jsp
index.jsp
assets/*
...html
...js
...css
index.jsp只是response.sendRedirect("index.html")s，其中 index.html 是 Angular CLI 生成的资产的一部分。JavaScript 和 HTML 由 提供webapp/，图像由webapp/assets/.
配置
从standalone-full.xml
<subsystem xmlns="urn:jboss:domain:undertow:4.0">
<buffer-cache name="default"/>
<server name="default-server">
<http-listener name="http" socket-binding="http" redirect-socket="https"/>
<host name="default-host" alias="localhost,workstation">
<location name="/" handler="welcome-content"/>
<filter-ref name="request-dumper"/>
</host>
</server>
<servlet-container name="default">
<jsp-config x-powered-by="false"/>
<websockets/>
</servlet-container>
<handlers> …推荐指数
解决办法
查看次数
如何在 Angular 动画之后运行代码？
我在 Angular 7 中设置了更改路线时的幻灯片动画。我现在遇到的问题是动画卡顿，因为我导航到的组件正在生命周期的动画期间执行代码OnInit。
动画完成后如何初始化组件的代码以防止丢帧？
编辑：
我正在使用路由器动画，这是我的设置：
app.component.html:
<div [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
animations: [routeAnimations]
})
export class AppComponent {
prepareRoute(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
}
}
app-routing.module.ts:
const routes: Routes = [
{
path: 'sign-in',
loadChildren: './modules/sign-in/sign-in.module#SignInModule',
data: {animation: 'slideLeft'}
},
{
path: 'dashboard',
component: DashboardComponent,
data: {animation: 'slideRight'}
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
animations.ts: …
推荐指数
解决办法
查看次数
如何对http 401做出角度响应
我有一个nodejs（express）作为服务器端，一个Angular 6作为客户端。在服务器中，我有中间件功能来进行会话检查。如果会话无效或不存在，我想向客户端发送响应，以便客户端可以对其做出反应。我想到从服务器返回401的响应代码，并在客户端中创建某种listener\route-guard\HttpInterceptor，这样 - 它可以管理客户端中的情况（例如将其重定向到登录页面） 。这是我在服务器中的代码：
router.use('/', (req, res, next) =>
{
if (!req.session.user)
{
res.status(401);
}
else{
next();
}
})
我如何在角度应用程序中捕获/收听此响应？
推荐指数
解决办法
查看次数
带有动态标签的角面包屑
我想用一个动态项目创建一个面包屑导航。像这样的东西：
主页 > A 类 > 子类 1 > XYZ
其中“类别 A”和“子类别 1”是静态的，“XYZ”是动态的。此动态标签仅在相应组件初始化后才存在，因为内容是从远程服务器加载的。层次结构来自具有子路由的路由器配置。
我尝试通过 访问当前组件ActivatedRoute，但我所能找到的只是组件名称，这在这方面没有帮助。我的下一个想法是观察RouterOutlet变化，但似乎没有任何事件因变化而被触发。
我模糊的想法是让组件实现这样的接口：
interface Named {
readonly name: Observable<string>
}
...并以某种方式订阅这个 Observable，但为了做到这一点，我需要组件实例！
如何从 RouterOutlet 中当前显示的组件获取计算字符串？
推荐指数
解决办法
查看次数