Question

这似乎是一个非常简单的问题，但我是Angular2的新手，我对组件之间的关系感到有点困惑。我有一个登录页面，当用户输入用户名时，我希望用户名显示在仪表板上，例如“欢迎，詹姆斯”。

我有一个login.html页面，loginHTMLcomponent对templateurl页面有login.html，其父对象为login.ts。我有dashboard.ts，它是dashboard.component.ts的父级（其中包含信息中心页面的HTML）

基本上我如何从login.html的输入字段中获取用户名以显示在dashboard.component.html中......我可能已经解释过这个问题。感谢。

我会尝试解释一下它在我的login.html中，我有类似的东西：

input type = "text" [(ngModel="name")]

在我的dashboard.component.ts中，在我的选择器里面我会：

@Component({
    selector: 'dashboardHTML',
    template:
    `
    <body>
      ........
      ..........
      <span ="user">Welcome, {{user}}</span>
      ...
      `

更新：只是想知道接近使用服务的正确方法。在我的login.component.html我有：

 <input id="username" type="text" class="form-control" 
placeholder="Username" ngControl="username" [(ngModel)]="name">

在我的login.HTMLComponent（其模板名称为login.component.html）中，我export class LoginHTMLComponent{ public name: {}; /////

在name.service.ts我有这个

import { Injectable } from '@angular/core';
import {LoginHTMLComponent} from "./LoginComponents/login.HTMLcomponent";
@Injectable()
export class NameService {
    getName(){
        return name;
             }
}

我不确定我是否正确地在这里打电话。感谢

Answer 1

您应该通过公共login component获取，而不是尝试将用户名从dashboard component传递到service。用户名可能是记录用户的后端响应的一部分。该响应（即登录用户）存储在服务中，可以注入到每个组件中。

在不在父/子层次结构内的组件之间交换数据通常是一个好主意。

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

关于您的服务

该服务不应引用LoginHTMLComponent或任何其他组件。在NameService（和LoginComponent）的构造函数中注入DashboardComponent，如下所示

private constructor(private nameService:NameService) {...}

然后导入NameService。

Answer 2

在您的情况下，服务可能是一个不错的选择。将登录数据存储在服务中，并从需要数据的任何组件访问它。使用$message = htmlspecialchars( str_replace('','',$message) );装饰服务，然后将其注入到组件中。

显示登录用户的用户名（Angular 2）

2 个答案: