Блог

Главная - Вопросы по программированию - Текст, не отображаемый при маршрутизации

Текст, не отображаемый при маршрутизации

#angular

Вопрос:

Я создаю пример программы в Angular 11, в которой у меня есть компонент приложения и компонент показа. В компоненте приложения есть две кнопки на английском и японском языках, которые при нажатии переходят к **Показать компонент * * и отображают текст на английском/японском языках (в зависимости от нажатия кнопки)в компоненте приложения.

Проблема: Проблема в том, что когда я нажимаю кнопку на японском или английском языках, она переходит к отображению компонента и отображает текст на языке(например, английском), но когда я нажимаю кнопку на японском языке, она ничего не делает. В консоли он показывает язык как японский, но на переднем конце он ничего не показывает.

app.component.html

 <h4>App Component</h4>
<button (click)="showComponent('English')">English</button>
<button (click)="showComponent('Japanese')">Japanese</button>
<router-outlet></router-outlet>

приложение.компонент.ts

 import { LanguageService } from './language.service';
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'DataSharedService';
  constructor(public router: Router, public languageService: LanguageService) {}
  showComponent(selectedLanguage: string): void {
    console.log(selectedLanguage);
    this.languageService.checkLanguage(selectedLanguage);
    this.router.navigateByUrl('/show').then(r => console.log(r));
  }
}

show.component.html

 <p>{{currLanguage}}</p>
<h4 *ngIf="currLanguage=='English'">You selected English !</h4>
<h4 *ngIf="currLanguage=='Japanese'">日本語を選びました！</h4>

показать.компонент.ts

 import { LanguageService } from './../language.service';
import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.scss']
})
export class ShowComponent implements OnInit {

  constructor(public languageService: LanguageService) { }
  currLanguage = '';
  ngOnInit(): void {
    this.currLanguage = this.languageService.language;
    console.log('Inside Show Component , current language is : '   this.currLanguage);
  }
}

language.service.ts

 import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class LanguageService {
  language = '';
  constructor() {}
  checkLanguage(selectedLanguage: string) {
    this.language = selectedLanguage;
    return this.language;
  }
}

Снимок
При нажатии на английский данные отображаются, но при нажатии на японский ничего не происходит

Просмотр Изображения

Пожалуйста, какое-нибудь решение ?

Комментарии:

1. В show.component.html, <p>{{currLanguage}}<p></p> печатает на японском языке ?

2. Али Тахир: Он будет отображаться только для одной кнопки, например, если вы сначала нажмете на японский, он будет отображать японский язык, но если вы выберете английский, ничего не произойдет, вам нужно снова обновить страницу и нажать на кнопку на английском языке, чтобы отобразить текст на английском языке

Ответ №1:

Как только вы посетите компонент «Показать», он не обновит тот же компонент, нажав на кнопки

Просто замените свой showComponent метод, чтобы обновить тот же маршрут

 showComponent(selectedLanguage: string): void {
    console.log(selectedLanguage);
    this.languageService.checkLanguage(selectedLanguage);

    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
      this.router.navigate(['/show']);
    });
  }

он обновит ваш компонент показа при нажатии кнопки

Комментарии:

1. пользователь5239222: Спасибо, брат, твое решение сработало для меня. Хорошего дня. Еще раз спасибо 🙂

Ответ №2:

Я полагаю, что метод navigateByUrl не обновляет компонент show, потому что вы уже находитесь на той же странице. Я бы предпочел использовать здесь темы. Измените свой language.service.ts следующим образом:

 export class LanguageService {
  private langSubject = new BehaviorSubject<string>('');
  language$: Observable<string> = this.langSubject.asObservable();
  checkLanguage(selectedLanguage: string) {
    this.langSubject.next(selectedLanguage);
  }
}

и show.component.html:

 <p>{{currLanguage | async}}</p>
Метки: ,