Question

我有表单，当用户提交表单时，用户将被重定向到我要显示成功消息的另一个页面。

这是article-update.component.html文件

        <form class="form-horizontal" [formGroup] = 'articleUpdateForm' (ngSubmit) = 'onSubmit()' enctype="multipart/form-data">

            <label for="articleTitle">Title</label>

              <input class="form-control" type="text" id="articleTitle"formControlName="title"[ngClass]="{ 'is-invalid': submitDisable && formValues.title.errors }"  />

            <label >Description</label>

               <textarea formControlName = 'description' id="summernote" class="summernote">
              </textarea>

              <button class="btn btn-info" type="submit" >Update</button>

        </form>

article-update.component.ts文件

  import { Component, OnInit } from '@angular/core';
  import {FormBuilder, FormControl, FormGroup, ValidatorFn, Validators} from '@angular/forms';


@Component({
selector: 'kt-article-update',
templateUrl: './article-update.component.html',
styleUrls: ['./article-update.component.scss']
 })

   export class ArticleUpdateComponent implements OnInit {
     articleUpdateForm: FormGroup;
       submitDisable = false;
       updateMessage:boolean = false;
       id:any;
       constructor(  public fb: FormBuilder, private route: ActivatedRoute, private _router:Router) {
         this.articleUpdateForm = this.fb.group({
    title: [''],
          description: ['']
       });
        }

        ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
}

   onSubmit() {
this.submitDisable = true;
if (this.articleUpdateForm.invalid) {

  return;
}

const formData: any = new FormData();

formData.append('title', this.articleUpdateForm.get('title').value);

formData.append('description', this.contents);


this.articleService.updateArticle(formData, this.id).subscribe(
  (response) => console.log(response),
  (error) => console.log(error),

  () => { this._router.navigateByUrl('admin/article/list'),
        this.updateMessage = true;
   }

);
  }

 }

用户更新文章后，他将被重定向到文章列表页面，我要在其中显示成功消息，即我在article-update.ts文件中声明了updateMessage变量，该变量最初为{{1 }}，但是当表单成功提交后，false将成为updateMessage。 article-list是article-update文件的父项。

article-list.component.html文件

true

article-list.component.ts文件

     <h1 *ngIf = 'updateMessage'> Article Updated successfully </h1>\

Answer 1

article.service.ts文件

import { ApiService } from './api.service';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class ArticleService {

  private _articleUpdated: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public readonly articleUpdated$: Observable<boolean> = this._articleUpdated.asObservable();

  constructor(private apiService: ApiService) { }

  updateArticle(formData, d): Promise<any> {
    return new Promise((resolve, reject) => {
      this.apiService.post('/updateArticle', formData).subscribe((result: any) => {
        this._articleUpdated.next(true);
        resolve(result.status)
      }, (error) => {
        this._articleUpdated.next(false);
        reject(error.messages ? error.messages : error.message);
      });
    });
  }
}

article-table.component.ts文件

import { Subscription } from 'rxjs';
import { ArticleService } from './../../services/article.service';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-article-table',
  templateUrl: './article-table.component.html',
  styleUrls: ['./article-table.component.css']
})
export class ArticleTableComponent implements OnInit,OnDestroy {

  updateMessage: boolean;
  articalUpdateSubscription: Subscription;

  constructor(
    private articleService: ArticleService
  ) { }

  ngOnInit() {
    this.articalUpdateSubscription = this.articleService.articleUpdated$.subscribe(isUpdated => {
      this.updateMessage = isUpdated;
    });
  }

  ngOnDestroy(){
    if(this.articalUpdateSubscription)
      this.articalUpdateSubscription.unsubscribe();
  }
}

表单提交后，另一个页面中的成功消息

1 个答案: