web-dev-qa-db-ja.com

angular 2のページを更新する方法

次のように1つのルーターリンクを作成しました。このルーターリンクはProductsStartComponentをロードし、このコンポーネントはナビゲーションではなくngifを使用して他のいくつかのコンポーネントをロードします。下の[製品カテゴリ]リンクはすべてのページに表示されるため、ngifの一部のコンポーネントに到達した後にこのリンクをクリックすると、ProductsStartComponentに戻りません。

私がAngularに慣れていないので、この動作に対する私の理解は、すべての値/モデルが設定されているためであり、それがナビゲーションではない理由です。これはページの更新またはリロードによって達成できると思いますが、それをどのように達成するかです。お知らせ下さい。

Admin.component.htmlでは、クリックするためのルーターリンクが定義されています。
返却値

<li routerLinkActive="active"><a routerLink="categories"><p>Products Categories</p></a></li>

返却値

App-routing.module.tsで、ルーターリンクのクリック時にロードする必要のあるコンポーネント

const appRoutes: Routes = [
{path: 'admin', component: AdminComponent, children: [
    { path: 'dashboard', component: AdminDashboardComponent },
    { path: 'sellers', component: AdminSellersComponent },
    { path: 'categories', component: ProductsStartComponent}
]}]

Product-start.component.htmlでは、これはルーターリンクの最初のクリックでロードされます。編集ボタンをクリックして他のコンポーネントに移動し、製品カテゴリのルーターリンクをクリックしても、何も起こらない場合、ページがリセットされることを期待しています。

<div>
    <div *ngIf="!isChildProductClicked; else notClicked" >
       <app-admin-products (productId)="received($event)"></app-admin-products>
    </div>
    <ng-template #notClicked><app-child-products [selProdIndex]=productIndex></app-child-products></ng-template>
</div>
angularangular-ui-router
18
user2800089

ページをリロードする場合は、コンポーネントに簡単にアクセスしてから実行できます。

location.reload();
25
ZAhmed

更新しました

Angular 2+でページの更新を実装する方法これはコンポーネント内で行われます。

location.reload();
2
theTechRebel

もう少しコードがなければ...何が起こっているかを言うのは難しいです。

しかし、コードが次のように見える場合：

<li routerLinkActive="active">
  <a [routerLink]="/categories"><p>Products Categories</p></a>
</li>
...
<router-outlet></router-outlet>
<myComponentA></myComponentA>
<myComponentB></myComponentB>

次に、ルーターリンクをクリックすると、カテゴリルートにルーティングされ、そのテンプレートがルーターアウトレットに表示されます。

子コンポーネントの非表示および表示は、ルーターアウトレットの表示に影響しません。

そのため、リンクをもう一度クリックすると、カテゴリルートは既にルーターアウトレットに表示されており、再び表示/再初期化されることはありません。

あなたがやろうとしていることについてもう少し具体的になることができるなら、私たちはあなたにもっと具体的な提案を提供することができます。 :-)

1
DeborahK

私が見つけた最も簡単な解決策は次のとおりです。

マークアップで：

<a [href]="location.path()">Reload</a>

コンポーネントのTypeScriptファイルで：

constructor(
        private location: Location
  ) { }
1
mrkernelpanic