Particles.jsは、角度2でunclickable画面を作成します。

Particles.jsに問題があります。Particles.jsは、角度2でunclickable画面を作成します。

パーティクルで読み込むたびに、検索ボックスはクリックできなくなります（タブで選択することもできます）。以下は

検索ボックスがここ

非選択であるという問題

の例私は私の中の粒子にロードする方法です。

index.htmlを

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> </body> </html>

そして、ここに私のページでそれをOAD、私の中で：

landingpage.component

ngOnInit(): void { //particles particlesJS.load('particles-js', 'particles.json', null); }

あり、私はページを実行するとエラーがでないので、私は間違って何が起こっているのかわかりません。 https://rocket.chat/は私が試みていることをしていると思われ、うまくいきますので修正することができます。

パーティクルを修正してページ要素を選択できるようにするにはどうすればよいですか？

出典

2017-07-07 Edon

は、私は私のindex.htmlを

<body> 
    <app-root></app-root> 
    <div id="particles-js" style="position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"> </div> 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
</body>

そして私のzインデックスよりも高いに私のランディングページ容器にZインデックスを設定するために必要な問題

を見つけました私の設定をcontentContainer Z-インデックスへのdiv：5

<div class="landingpageContainer"> 
    <div class="background" [ngStyle]="{'background-image':'url(' + backgroundPlaceholder.info.name + ')'}"> 
    <div class="contentContainer" style="z-index: 5;"> 
     <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" 
     /> 
     <h1>Enter a show</h1> 
     <div class="inputBoxArea"> 
     <input type="text" class="inputArea" placeholder={{backgroundPlaceholder.info.placeholderText}} [(ngModel)]="keystroke" (ngModelChange)="getKey($event)"> 
     </div> 
     <div class="resultListArea"> 
     <ol> 
      <li (click)="setTitle(list)" [routerLink]="['/details', list.id]" *ngFor="let list of shows"> <img class="liPosters" src="https://image.tmdb.org/t/p/w92/{{list.poster}}" /> 
      <div class="title">{{list.show}}</div> (
      <div class="year">{{list.year}}</div>) 
      </li> 
     </ol> 
     </div> 
    </div> 
    </div>

出典

2017-07-07 21:38:55 Edon

Particles.jsは、角度2でunclickable画面を作成します。

答えて

関連する問題