标签: angular4-router

当我的用户在屏幕上进行肮脏的更改时，我会设置一个路由防护，以在他们尝试离开时提示他们保存或丢弃。

但是，如果由于不活动而将其注销，则我想强制导航并绕过路由保护程序（通过放弃对其所做的更改），以确保其屏幕为空白。

我如何绕过路线警卫？

在这方面，非常感谢角顶大师的帮助。

这是我要尝试执行的操作，当我访问主应用程序页面时，它会从config.service.ts调用getConfigs（）并从后端获取数据，然后更新this.configStringSource.next（config）。在那之后，我试图将其重定向到this.router.navigate（['/ clone / status']），但是重定向没有发生。

应用程序路由

import { Routes, RouterModule } from '@angular/router';

import { CloneComponent } from './clone/clone.component';
import { StatusComponent } from './status/status.component';
import { ConfigurationComponent } from './configuration/configuration.component';
import { LogsComponent } from './logs/logs.component';
import { ConfigResolver } from './_services/config-resolver.service';

const appRoutes: Routes = [
    { path: 'clone', component: CloneComponent, children: [
        {path: 'status', component: StatusComponent, resolve: {config: ConfigResolver} },
        ]
    },
    { path: 'logstream', component: LogstreamComponent },
];

export const AppRouting = RouterModule.forRoot(appRoutes);

配置文件

export class …

我可以调用Angular 4中的某些内容,在哪里传入字符串或路由令牌数组并获取该路由的静态路由数据？

例如:

const targetRoute = '/test/route'
const routeData = {{something}}.getRouteData(targetRoute)

// { routeDataValue: 'something' } etc...

我正在寻找的数据是路线定义中定义的数据

 const routes: Routes = [
    {
        path: 'test/route',
        data: { //This data object
          animation: {
            value: 'fetching-results'
          },
          progress: 100,
          sectionIdentifier: {
            background: 'results',
            backLinkUrl: null,
            backLinkText: null
          }
        },
    }
]

我是 Angular 2-4 的新手，现在我在用 f5 重新加载页面时遇到了问题。正如我所看到的，问题是我导航到同一条路线，因此 ngOnInit() 没有再次加载。在 ngOnInit() 是我初始化我使用的一些变量和动态表单的地方。我看到了一个可能的解决方案，即订阅路由的参数并调用一个初始化所有内容的方法。像这样的东西：

this.activeRoute.params.subscribe(
params => {
   this.paramX = params['paramX'];
   this.initializeComponent();
});

private initializeComponent() {

}

  这是正确的做法吗？这是一个好的做法还是我应该以另一种方式来做？提前致谢。

我有一个链接：

<a routerLink="/test" (click)="testClick($event)">Test link </a>

我想在testClick功能上做这样的事情：

testClick(event:any) {
    if (..some expression..) {
        //custom popup confirmation
        //if true --> event.preventDefault();
    } else {
        // go to link
    }
}

但是打电话preventDefault是行不通的。我该如何解决？

我在angular 4应用程序中实现基本路由,并在浏览器上加载应用程序时出现以下错误.我在approuting.module中定义了路由,也引用了Ngmodule中的路由器模块以及approuting.module.不确定是什么问题

Can't bind to 'routerLink' since it isn't a known property of 'a'.

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ew" [hidden]="!dataItem.isVisibleView">
                                                        <a [ERROR ->][routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-fil"): ng:///MovieModule/MovieComponent.html@85:59
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("it" [hidden]="!dataItem.isVisibleEdit">
                                                        <a [ERROR ->][routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidd"): ng:///MovieModule/MovieComponent.html@92:59

以下是我的申请的源代码

movie.component.html中的kendo网格片段

  </kendo-grid-column>
                                             <kendo-grid-column title="View" headerClass="kendoGridHeader" class="kendoGridControlCell">
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="View" [hidden]="!dataItem.isVisibleView">
                                                        <a [routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-file-text" …

我是 angular 4 jasmine 单元测试的新手。

1. 请帮助我获得附加组件的完整测试覆盖率。
2. 我已经为翻译模块添加了子依赖项，但仍然出现错误：InjectionToken USE_DEFAULT_LANG 没有提供程序！这是什么解决方案？？？
3. 我想知道如何在我附加的代码中覆盖变量和方法以进行全面覆盖。

谢谢你的帮助。

登录组件：

   import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    import { HttpError } from '../core/http-error';
    import { jsonFields } from '../app.constants';
    import { LoggedUserData } from '../shared/model/loggedUserData';
    import { Observable } from 'rxjs/Observable';
    import { FormControl, Validators } from '@angular/forms';
    import { LoginService } from '../shared/login.service';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss'] …

Angular 4中的$ locationChangeStart等价物是什么？我正在寻找一个处理程序来跟踪网址的变化.我读到有一个位置服务,但我不确定我是否需要使用它或在这里寻找一些东西https://angular.io/guide/router ..任何指针都会非常有帮助.谢谢!

更新:我想在服务中而不是组件中执行此操作.

在一个按钮点击我有功能，

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

在导航组件中，我获取的数据如下，

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

在哪里，

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

并且，

console.log(data.mockup_id) gives result undefined

在这里我需要检索对象值，但无法获取它。请帮助我通过查询参数检索数据并使用打字稿ngOnit而不使用 html获取数据。

我想创建一个Breadcrumb.

面包屑维基百科

为此,我考虑创建一个服务来处理它.但我需要挂钩每个路由器更改,每次路由器状态更改时将使用的方法或类.

必须解决这个挑战而不在我的所有组件中添加onActivate方法,因为我有很多它们.

十分感谢 !