Чтобы реализовать генерацию случайного номера и вывести блок под этим номером в Angular, сначала вам понадобится создать компонент и определить представление (HTML-шаблон) для него.
1. Создайте новый компонент с помощью Angular CLI командой:
ng generate component RandomBlock
2. Внутри компонента RandomBlock
определите свойства и методы, необходимые для генерации случайного числа и отображения блока.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-random-block', templateUrl: './random-block.component.html', styleUrls: ['./random-block.component.css'] }) export class RandomBlockComponent implements OnInit { randomNumber: number; ngOnInit() { this.generateRandomNumber(); } generateRandomNumber() { this.randomNumber = Math.floor(Math.random() * 10) + 1; // Генерируем случайное число от 1 до 10. } }
3. Затем определите HTML-шаблон для компонента RandomBlock
в файле random-block.component.html
.
<div> <h2>Случайный номер: {{ randomNumber }}</h2> <div *ngIf="randomNumber > 5"> <!-- Вставьте сюда содержимое блока, который должен появиться, если случайное число > 5 --> </div> <div *ngIf="randomNumber <= 5"> <!-- Вставьте сюда содержимое блока, который должен появиться, если случайное число <= 5 --> </div> </div>
4. Используйте компонент RandomBlock
в нужном месте своего приложения, например, в корневом компоненте AppComponent
:
<app-random-block></app-random-block>
Теперь при каждой загрузке страницы будет генерироваться случайное число от 1 до 10, на основе которого будет решаться, какой блок будет отображаться в шаблоне компонента RandomBlock
. Если случайное число больше 5, будет отображаться блок, указанный внутри *ngIf="randomNumber > 5"
, а если число меньше или равно 5, будет отображаться блок, указанный внутри *ngIf="randomNumber <= 5"
.