时间戳

首页 > 解决方案 > 仅在首次登录时隐藏文本

angular - 仅在首次登录时隐藏文本

问题描述

我的网站上有 3 页。

第一页-> 包含 3 个字段（姓名、电话号码、电子邮件）

用户输入信息

在此处输入图像描述

然后，第二页包含 3 个字段（地址、邮政编码、城市）

在此处输入图像描述

有一个标题“第一次连接”，如果用户在网站上连接了几次，我想隐藏这个标题。所以，我们会有这个：

在此处输入图像描述

最后一页

在此处输入图像描述

我该如何解决这个问题？我必须使用Route Guards？ https://juristr.com/blog/2018/11/better-route-guard-redirects

第二页对我来说是个问题...

<!-- Second page : Start -->
<div class="container" *ngIf="addressComplete">
  <div class="title" style="color: blue; font-size: 25px; text-align:center;"> First connection</div>
  <div class="one">
    <input type="text"
           class="input"
           placeholder="Address">
  </div>
  <div class="two">
    <input type="text"
           class="input"
           placeholder="Zip Code">
  </div>
  <div class="three">
    <input type="text"
           class="input"
           placeholder="City / State">
  </div>
  <div class="four">
    <button class="submit" (click)="addressSubmit()">Submit</button>
  </div>
</div>
<!-- Second page : End -->

我怎么能在我的 component.ts 中隐藏这个标题？

import { Component, OnInit } from '@angular/core';
import { UserInfo } from '../user-info';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {
  personalInfoComplete = true;
  addressComplete = false;
  creditCardComplete = false;
  completedOrder = false;

  stepOne = false;
  stepTwo = false;
  stepThree = false;

  customer = false;

  customerInformation = [];

  fruite = ['apple', 'orange'];

  userInfoArray: UserInfo;

  name;

  constructor() {}

  ngOnInit() {
    console.log('Fruite' + this.fruite.push('banana'));
    console.log(this.fruite);
  }

  personalInfoSubmit() {
    this.personalInfoComplete = false;
    this.addressComplete = true;
    this.stepOne = true;
    this.customer = true;

    console.log('Your Info ' + this.name.userInfoArray);
  }

  addressSubmit() {
    this.addressComplete = false;
    this.creditCardComplete = true;
    this.stepTwo = true;
  }

  creditCardSubmit() {
    this.creditCardComplete = false;
    this.completedOrder = true;
    this.stepThree = true;
  }
}

如果你有兴趣这里是我的代码Stackblitz

标签： angular

解决方案

我不确定您所说的“连接到网站”究竟是什么意思，但我认为您必须在您的网站上放置一个 cookie 以跟踪特定用户是否已经访问过您的网站。然后你可以使用一个简单的布尔值来隐藏或显示标题。

作为站点节点，您可以通过使用角度形式大幅改进代码。它非常简单，并且具有强大的验证功能，可以为您节省大量代码。希望我能帮助你。

推荐阅读