首页 > 解决方案 > 登录后显示一条消息 - Angular 5

问题描述

大家好/晚上好,我是 typescript 和 angular 5 的新手,我想创建一个服务,在每次登录后为用户显示一条消息。这就是我所做的:

这是一个文本区域,它将提交登录操作后将在主页中显示的文本。我的意思是,管理员将通过此表单编写和提交消息,然后将其显示给用户。

export class NewsLetterComponent implements OnInit {
  @Output() onNewsText = new EventEmitter<string>();

  newsText: string;
  constructor(private _router: Router) { }

  ngOnInit() { 
    this.newsText = null;
  }

  onclick(newsText: string) {
    this.newsText;
    this.onNewsText.emit(newsText);
 
  }
<div class="container-fluid" >
<form>
     <div class="form-group">
    <textarea #newsText class="form-control"  rows="3"></textarea>
  </div>
   <button type="submit" (click)="onclick(newsText.value)"class="btn btn-primary pull-right">Publish</button>
</form>
</div>

并将其显示在主页中:

<header [user]="user"  (logout)="logout()"> Loading...</header>
 <p-messages #newsletter [(value)]="newsletterText"></p-messages> 
<content class="admin-page">
<sidenav></sidenav> 
<router-outlet></router-outlet>
<content>

export class AdminPageComponent implements OnInit, OnChanges {
@ViewChild('newsletterComponenet') newsletterComponenet: NewsLetterComponent;
@Input('newsletterText') newsletterText: String;

//the rest of the code *

  ngOnChanges() {
    if (this.newsletterText && this.newsletterText.length) {
       this.msgs.push({ severity: 'info', summary: this.newsletterText });
    }
  }

这肯定行不通,而且我不知道我正在做的事情是否会导致正确的方式。有人可以帮我吗?

PS我用谷歌搜索但在任何地方都找不到满意的答案

标签: typescriptangular5messages

解决方案


遵循链球菌:

  1. 构建一个服务,当您单击 NewsLetterComponent 中的提交按钮时将消息发送到服务器。

  2. 服务器存储此消息。

  3. 为您的主页创建另一个服务,在登录后向服务器发送请求以获取最新消息。

这两项服务都是独立的,与EventEmitter()您的服务完全无关NewsletterComponent


推荐阅读