相关疑难解决方法(0)

假设我当前在具有URL的页面上/user/:id.现在从这个页面我导航到下一页:id/posts.

现在有办法,以便我可以检查以前的URL是什么,即/user/:id.

以下是我的路线

export const routes: Routes = [
  { 
    path: 'user/:id', component: UserProfileComponent
  },
  {  
    path: ':id/posts', component: UserPostsComponet 
  }
];

如何在Angular 2路由器中监听状态变化？

在Angular 1.x中我使用了这个事件:

$rootScope.$on('$stateChangeStart',
    function(event,toState,toParams,fromState,fromParams, options){ ... })

所以,如果我在Angular 2中使用这个eventlistener:

window.addEventListener("hashchange", () => {return console.log('ok')}, false);

它不是返回'ok',然后从JS更改状态,然后才运行浏览器history.back()函数.

使用router.subscribe()函数作为服务:

import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';

@Injectable()
export class SubscribeService {
    constructor (private _router: Router) {
        this._router.subscribe(val => {
            console.info(val, '<-- subscribe func');
        })
    }
}

在路由中初始化的组件中注入服务:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    selector: 'main',
    templateUrl: '../templates/main.html',
    providers: [SubscribeService]
})
export class MainComponent {
    constructor (private subscribeService: SubscribeService) {}
}

我将此服务注入其他组件,例如本例中.然后我改变状态,console.info()在服务中不起作用.

我做错了什么？

创建像这样的Observable之后

var source = Rx.Observable.create(function(observer) {...});

subscribe有什么区别

source.subscribe(function(x) {});

并为每个人

source.forEach(function(x) {});

我的模块.ts,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Router }   from '@angular/router';
import { AppComponent }  from './crud/app.component';
import { Profile }  from './profile/profile';
import { Mainapp }  from './demo.app';
import { Navbar }  from './header/header';
// import {ToasterModule, ToasterService} from 'angular2-toaster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({

  imports:      [ BrowserModule,FormsModule, ReactiveFormsModule ,
  RouterModule.forRoot([
      { path: '', component:AppComponent},
      { path: 'login', component:AppComponent},
      { path: 'profile', component:Profile}
    ]) ],
  declarations: [ AppComponent,Mainapp,Navbar,Profile …

我遇到Angular 2的一个问题,从一个路由到另一个路由的更改不会自动滚动到新视图的顶部.我意识到Angular 1允许将一个autoscroll属性添加到HTML元素中,而其他人已经提出了一些简单的javascript(例如window.scroll(0, 0))来强制视图在加载时滚动到顶部.

但是,我不知道如何使用Angular 2完成此任务.有谁知道如何实现这一目标？

我想在每次页面更改时执行一些代码.

我可以ngOnDestroy为每个页面添加一个方法.似乎我可以使用Ionic 2页面生命周期钩子(例如ionViewDidUnload)获得完全相同的效果,但我没有费心去测试它.我宁愿在主app类中添加一个方法.

我看到你可以订阅Angular 2 路由器事件.如何翻译用于Ionic 2？我首先得到一个错误import { Router } from '@angular/router;:

TypeScript error: <path>/node_modules/@angular/router/src/common_router_providers.d.ts(9,55): Error TS2305: Module '"<path>/node_modules/@angular/core/index"' has no exported member 'NgModuleFactoryLoader'.
TypeScript error: <path>/node_modules/@angular/router/src/router.d.ts(14,39): Error TS2305: Module '"<path>/node_modules/@angular/core/index"' has no exported member 'NgModuleFactoryLoader'.
TypeScript error: <path>/node_modules/@angular/router/src/router_module.d.ts(9,10): Error TS2305: Module '"<path>/node_modules/@angular/core/index"' has no exported member 'ModuleWithProviders'.

webpack配置

var path = require('path');


module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone'),
    path.resolve('app/app.ts')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false …

我正在开发一个angular2应用程序,我使用路由器.我在页面/ myapp /注册.注册后,我将使用导航到/ myapp/login./ myapp/login也可以从我的主页/ myapp导航.所以现在,当用户users/myapp/login我回去了.这可以通过使用location.back()来完成.但是当用户来自/ myapp/signup时,我不想回去.所以我应该检查用户是否来自/ myapp/signup,如果是,我想将它指向其他地方.我如何才能知道以前的网址,以便根据具体情况将用户定向到特定状态？

我有一个非常奇怪的问题,Angular 2路由到我ngOnInit在路由到的组件中的两次被调用,并且浏览器中的路由被重置为原始路由.

我有一个NotificationListComponent和NotificationEditComponent一个MaintenanceModule.

在我的根目录中AppModule,我设置了RouterModule将任何未映射的路由重定向到/maintenance/list.

app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
      {path: "", redirectTo: "maintenance/list", pathMatch: "full"},
      {path: "**", redirectTo: "maintenance/list", pathMatch: "full"}
    ], {useHash: true}),
    CoreModule.forRoot({notificationUrl: "http://localhost:8080/notification-service/notifications"}),
    MaintenanceModule
  ],
  providers: [NotificationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

而且我/maintenance/list在我的路线中定义了MaintenanceModule指向我NotificationListComponent的/maintenance/edit/:id路线,以及指向我的路线NotificationEditComponent.

maintenance.module.ts:

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: "maintenance/list", component: …

我想根据 Angular 中的当前 url 更改某个标题。所以 component.ts 看起来像这样：

import {Router} from '@angular/router';
//code
public name: string
constructor(
    public router: Router
  ) {}
getName()
{
if(this.router.url === "/some_list")
{this.name = "List"}
else if(this.router.url === "/detail")
{this.name = "Detail"}
}

进而

<a>{{this.name}}</a>

现有的答案，例如如何检测 Angular 中的路线变化？无法告诉我在路由更改后如何做某事（更改 = true 或 false）。那么如何在 url 更改时运行此函数，以便标题根据当前视图？

我有一个Typescript编译问题.此代码返回错误:

错误TS2304:找不到名称'NavigationEnd'.

如何让编译器了解NavigationEnd类型？NavigationEnd是angular2路由器事件类型.

this.router.events.subscribe((e) => {e instanceof NavigationEnd ? 
console.log('NavigationEnd'):console.log('Not NavigationEnd')});

我正在使用IDE PHPStorm.