Question

我正在使用离子型，并且我有一个SVG文件，其中在形状上有一个ID（我将有许多具有ID的形状），在其中我添加了一个事件侦听器，试图触发特定的幻灯片打开。当我运行此命令时，show_slides值将设置为true（如在日志中所见），但它控制的div不会出现。我已经玩了很多，似乎无法让它做我想做的事。我想完全隐藏幻灯片以及未选择查看的幻灯片。谢谢您的提前帮助

Ts文件

export class HomePage {
public show_slides:boolean=false;

@ViewChild(Slides) private _slides: Slides;
@ViewChild(Content) content: Content;

constructor(public navCtrl: NavController, public navParams: NavParams) {}

ionViewDidLoad() {
    this.show_slides=false;
    var a=document.getElementById('bub_mission');
    if(a){
        console.log(a);
        a.addEventListener("click", this.openMission ,false);
    } else{
        console.log("didn't work");
    }
}

openMission(){
    this.show_slides=true;
    console.log(this.show_slides);
}

HTML文件

<ion-content>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="380px" height="480px" viewBox="0 0 380 480" enable-background="new 0 0 380 480" xml:space="preserve">

<g id="bub_mission">
    <path fill="#267F26" d="M47.985,115.711c-39.829,18.659-37.964,54.643,31.44,21.191C148.83,103.45,155.032,59.158,47.985,115.711z"
    />

</svg>  
        <text transform="matrix(0.9205 -0.3907 0.3907 0.9205 35.7078 140.478)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="17.999">Our Mission</text>
</g>



<div *ngIf="show_slides">
    <ion-slides pager=true>
        <ion-slide style="background-color: green">
            <h2>Our Mission</h2>
        </ion-slide>
        <ion-slide style="background-color: blue">
            <h2>We're New</h2>
        </ion-slide>
        <ion-slide style="background-color: red">
            <h2>Slide 3</h2>
        </ion-slide>
    </ion-slides>
</div>
</ion-content>

离子SVG接合以打开幻灯片

0 个答案: