单击按钮时显示/隐藏iframe

Question

我有一个我想要分叉的已建立的应用程序。 我添加了.html，.component.ts，.module.ts如下。 我认为我的问题很简单，但我不知道如何在Angular中编码。 我想添加一个按钮，允许我隐藏/我的iframe（按钮1：iframe 1 /按钮2：iframe 2）。 我只添加了一个按钮。按钮显示但是当我点击它时我什么也看不见。 你能帮我解决这个问题吗？

.module.ts：

import { NgModule } from '@angular/core';
    import { AppComponent } from './App.component';
    @NgModule({
        declarations: [
            AppComponent,
        ],
        imports:[],
        providers: [],
        entryComponents: [
           AppComponent
           ]
        })
    export class AppModule { }

.component.ts：

import { 
        Component,
        OnInit } from '@angular/core';
    @Component({
         selector: 'mui-App',
        templateUrl: 'App.component.html'
    })  
    export class AppComponent implements OnInit{ 
    public ngOnInit() {
        var x = document.getElementById("f1");
        if (x.style.display === "none") {
            x.style.display = "block";
       } else {
            x.style.display = "none";
        }
    }    
    }

html的

<button onclick="ngOnInit()">Show</button>
    <div id="f1">
        <iframe src="http://myiframe" WIDTH = 1850 HEIGHT= 970 >
        </iframe>
    </div>

    <div id="f2">
         <iframe src="http://myiframe2" WIDTH = 1850 HEIGHT= 970 >
         </iframe>
    </div>

Answer 1

试试这个。

在你的模板中。

    <button (click)="hideElement()">Show</button>
    <div #f1>
        <iframe src="http://myiframe" WIDTH = 1850 HEIGHT= 970 >
        </iframe>
    </div>

    <div #f2>
         <iframe src="http://myiframe2" WIDTH = 1850 HEIGHT= 970 >
         </iframe>
    </div>

在您的组件中。

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

@Component({
  selector: 'mui-App',
  templateUrl: 'App.component.html'
})

export class AppComponent implements AfterViewInit {

  @ViewChild('f1') f1: ElementRef;
  @ViewChild('f2') f2: ElementRef;

  public ngAfterViewInit(): void {
    this.hideElement()
  }

  public hideElement(): void {
    if (this.f1.nativeElement.style.display === "none") {
      this.f1.nativeElement.style.display = "block";
    } else {
      this.f1.nativeElement.style.display = "none";
    }
  }
}

Answer 2

您可以在代码中执行此操作...
在HTML中

<button (click)="showMe =! showMe">Show</button>
<div *ngIf="showMe">
    <iframe src="http://myiframe" WIDTH = '1850' HEIGHT= '970' >
    </iframe>
</div>

<div *ngIf="!showMe">
     <iframe src="http://myiframe2" WIDTH = '1850' HEIGHT= '970' >
     </iframe>
</div>

在Typescript中

public showMe = false;