Как показать модальный диалог в угловом формате, используя w3.css в качестве фреймворка? - PullRequest
Новая
       25

Как показать модальный диалог в угловом формате, используя w3.css в качестве фреймворка?

0 голосов
/ 10 декабря 2018

У меня есть угловой Ng для создания списка элементов, я хочу показать модальное диалоговое окно с подробностями о выбранном элементе, я использую w3.css в качестве фреймворка css, но мне не удалось

Я пытался использовать NgStyle с некоторыми входными данными от родителя к ребенку, 4 дня назад я запустил использование angular, поэтому я еще не привык к его логике, в журналах консоли я вижу, что мой щелчок срабатывает, но я не знаю, что происходит после

Мой код

Компонент списка и шаблон 

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BreakPointService } from '../../providers/break-point.service';
import { ReactiveTwitterSpringService } from '../../reactive/reactive-twitter-spring.service';
import { ITweet } from '../../reactive/model/itweet';
import { Subscription, Subject } from 'rxjs';

@Component({
    selector: 'app-tweet-list',
    templateUrl: './tweet-list.component.html',
    styleUrls: ['./tweet-list.component.css']
})
export class TweetListComponent implements OnInit {


    list_div_class;
    search_input_class;

    selectedTweet: ITweet;
    public search_results$ = new Subject<any>();
    search_results: ITweet[] = new Array();
    subscribe: Subscription = new Subscription();
    constructor(private tweetService: ReactiveTwitterSpringService, private cdr: ChangeDetectorRef) { }
    visible = 'none';

    search(tag) {

        this.search_results = new Array();
        this.subscribe.unsubscribe();
        this.subscribe = new Subscription();
        this.search_results$ = new Subject<any>();
        this.subscribe.add(this.tweetService.search(tag).subscribe(tweet => {
            this.search_results.push(tweet);
            this.search_results = this.search_results.slice();
            this.cdr.detectChanges();
            this.search_results$.next(this.search_results);
            console.log(tweet);
        }));
        console.log('array contains ' + this.search_results);

    }



    setSelected(tweet) {
        console.log('selecting and showing');
        this.selectedTweet = tweet;
        this.visible = 'block';
    }


    ngOnInit() {

        BreakPointService.current_css.subscribe(value => {
            console.log('value is ' + value);
            this.setupCss(JSON.parse(value));
        });


    }

    setupCss(value: any): any {
        this.list_div_class = value.list_div_class;
        this.search_input_class = value.search_input_class;
    }
}

шаблон 

<div class="{{list_div_class}}" style="max-height: 100vh;">
  <input type="text" class="{{search_input_class}}" (keyup.enter)="search(searchInput.value)" #searchInput>
  <ul class="w3-ul w3-hoverable" style="overflow-x:auto;max-height:70vh;">
    <li class="w3-bar w3-center" *ngFor="let tweet of search_results " (click)="setSelected(tweet)">
      <img src="{{tweet.userImage}}" class="w3-bar-item w3-circle" style="width:100px;">
      <div class="w3-bar-item">
        <span class="w3-large">{{tweet.id.name}}</span>
        <br>
        <span>#{{tweet.tag}}</span>
      </div>

    </li>
  </ul>
  <app-tweet-detail [detail]="selectedTweet" [visible]="visible"></app-tweet-detail>
</div>

Мой компонент детали ишаблон 

import { Component, OnInit, Input } from '@angular/core';
import { ITweet } from '../../../../reactive/model/itweet';

@Component({
    selector: 'app-tweet-detail',
    templateUrl: './tweet-detail.component.html',
    styleUrls: ['./tweet-detail.component.css']
})
export class TweetDetailComponent implements OnInit {


    @Input() detail: ITweet = new ITweet();
    @Input() visible = 'none';

    constructor() { }
    setInvisible() {
        console.log('hidding');
        this.visible = 'none';
    }

    ngOnInit() {
    }

}

шаблон 

<div id="modal" class="w3-modal" [ngStyle]="{display: visible}">
  <div class="w3-modal-content">
    <div class="w3-container" *ngIf="detail">
      <span (click)='setInvisible()' class="w3-button w3-display-topright">&times;</span>
      <img src='{{detail.userImage}}' style='width: 250px;' />
      <span class='w3-large'>{{detail.id.name}} {{detail.country}} {{detail.placeFullName}}</span>
      <p>{{detail.id.text}}</p>
    </div>
  </div>
</div>

Что мне делать?

NB

В w3В учебнике .css они используют элемент get по идентификатору, чтобы изменить видимость на none или block.

1 Ответ

0 голосов
/ 10 декабря 2018

Полагаю, вам нужно иметь две переменные, содержащие listOfItems и selectedItem, где вы будете отображаться на модале.например,

Файл компонента TS 

import { Component, OnInit } from '@angular/core';

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

  listOfItems: any[];
  selectedItem: any;

  ngOnInit() {
    this.listOfItems = [
      {
        title: 'Title 1',
        content: 'this is my first item'
      },
      {
        title: 'Title 2',
        content: 'this is my second item'
      }
    ];
  }

  openModal( item ) {
    this.selectedItem = item;
  }

  closeModal() {
    this.selectedItem = undefined;
  }

}

. Таким образом, у нас есть openModal, который назначает элемент переменной selectedItem для отображения конкретного элемента.и позвольте модальному показу closeModal отозвать значение и снова сделать наш модальный скрытым.поэтому реализация этого в html выглядит следующим образом.

Компонент HTML 

<button *ngFor="let item of listOfItems; let i = index" (click)="openModal(item)" class="w3-button">Open item #{{ i }}</button>

<div *ngIf="selectedItem" class="w3-modal" [style.display]="selectedItem ? 'block' : 'none'">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span (click)="closeModal()" class="w3-button w3-display-topright">&times;</span>
      <h1>{{ selectedItem.title }}</h1>
      <p>{{ selectedItem.content }}</p>
    </div>
  </div>
</div>

Итак, у нас есть кнопка, которая перебирает список элементов и передает элемент нафункция, чтобы мы могли выбрать, какой элемент будет отображаться.Затем в модальном режиме мы пытаемся проверить, определено ли selectedItem, так что если да, то дисплей будет виден, а не иначе.

...