Angular2 组件与路由器插座的通信

Question

要么我没有得到模式，要么我的设计有误。

使用 angular2-beta0，打字稿

基本上我已经设置了一个非常基本的应用程序，它带有一个根组件，一个控制主视图的路由器，然后在某些页面上我有一个子路由器来控制该组件上的子视图。

我似乎在苦苦挣扎的是如何通过组件之间的通信来构建事物。就目前的应用程序而言，它的排列方式对我来说是合乎逻辑的，主路由的视图没有任何共同点，在子路由视图中它们都共享相同的侧导航和标题。我遇到的问题似乎是与子视图的父视图通信。似乎是一个孩子在路由器插座中，它无法获得父组件的依赖关系。我查看了自定义事件，但这些似乎只有在绑定到模板时才有效。唯一的其他选择似乎是服务，但对我来说似乎很糟糕，因为理想情况下，我希望父组件能够控制子组件的状态。

任何示例代码...

@Component({
    selector: 'app'
})

@View({
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    { path: '/', as: 'Login', component: LoginForm },
    { path: '/main/...', as: 'Main', component: Main}
])

class App {

    constructor(private _router: Router) {
    }

}

bootstrap(App, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]);


@Component({
    selector: 'main'
})

@View({
    templateUrl: '/client/main/main.html',
    directives: [ROUTER_DIRECTIVES, NgClass, Menu, Main]
})

@RouteConfig([
    { path: '/', as: 'Clear', component: StateClear },
    { path: '/offer', as: 'Offer', component: StateOffer }
])

export class Main {

    constructor(private _router: Router) {

    }

}

@Component({
    selector: 'state-clear'
})

@View({
    templateUrl: '/client/bookings/state-clear.html'
})

export class StateClear {

    constructor(main: Main) {

    }
}

我遇到的 DI 错误是这样的......

异常：无法解析 StateClear（未定义）的所有参数。确保它们都有有效的类型或注释。

事件没有错误，因为我看不到如何在模板之外监听。

Answer 1

因此，您可能想要做的不是将 DI 与父组件一起使用。

就像你在这里做的：

export class StateClear {

    constructor(main: Main) {

    }
}

您可能只想创建一个服务来处理您希望在路由/组件级别共享的数据。

@Injectable()
export class UserSettingsService {
  // Application wide settings/config should be instatiated here
  // with a call from OnInit we can set all of these values.
  constructor() { }

  public iId: number;
  public userName: string;
  public isLoggedIn: boolean;
  public firstName: string;
  public lastName: string;
  public permissions: string[];
  getUser(userName:string) {
    // with an AJAX request get user Auth.
    return Promise.resolve(api.getUserAuth(userName));
  }
}

这个 UserSettingsService 现在可以作为应用程序级服务添加到您的引导程序中，然后可以传递到您希望与之共享的所有路由中。 dependency-injection-in-angular-2

bootstrap(App, [ROUTER_PROVIDERS, UserSettingsService, provide(APP_BASE_HREF, { useValue: '/' })]);

然后您执行以下操作以访问组件中的该数据。

@Component({
    selector: 'state-clear'
})

@View({
    templateUrl: '/client/bookings/state-clear.html'
})

export class StateClear {
    userName:string;
    userId:int;
    isLoggedIn:boolean;
    constructor(private _userSettings: UserSettingsService) {
         // Not that you would do this here again but just for an example that the data is retrievable here.
         this.userName = this._userSettings.userName;
         this.userId = this._userSettings.iId;
    }
}