2017-11-17 11 views
0

新しい角度テンプレートを使用して、コードを変更するたびに、ビューを更新する代わりに、既存のビューの下、上または下にレンダリングします。なぜ誰が知っていますか?それは、私がプロジェクトを作成したときにこれをしなかった、 しかし、私はなぜそれが今になるのか分からない。 enter image description here角度表示レンダリングを複数回実行する理由は何ですか?

<mat-toolbar style="background:purple"> 
    <mat-button-toggle (click)="sidenav.toggle()"><i class="material-icons" style="color:white">menu</i></mat-button-toggle> 
</mat-toolbar> 
<mat-sidenav-container> 
    <mat-sidenav #sidenav style="width: 20%;"> 
     <mat-selection-list> 
      <mat-list-item>Item one</mat-list-item> 
      <mat-list-item>Item two</mat-list-item> 
      <mat-list-item>Item one</mat-list-item> 
      <mat-list-item>Item one</mat-list-item> 
      <mat-list-item>Item one</mat-list-item> 
     </mat-selection-list> 
    </mat-sidenav> 
    <router-outlet></router-outlet> 
</mat-sidenav-container> 

<!DOCTYPE html> 
<html style="height:100%;"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>@ViewData["Title"] - RemoteTrainer</title> 

    <base href="~/" /> 
    <link href="~/dist/deeppurple-amber.css" rel="stylesheet" /> 
    <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" /> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript"></script> 
</head> 
<body> 
    @RenderBody() 

    @RenderSection("scripts", required: false) 
</body> 
</html> 

<h1>Hello, world!</h1> 
<p>Welcome to your new single-page application, built with:</p> 
<ul> 
    <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li> 
    <li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li> 
    <li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li> 
    <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li> 
</ul> 
<p>To help you get started, we've also set up:</p> 
<ul> 
    <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li> 
    <li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li> 
    <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li> 
    <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular app will be rebuilt and a new instance injected is into the page.</li> 
    <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li> 
</ul> 
<button mat-fab>Click Me</button> 
<mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider> 
+0

[コードお願い](http://idownvotedbecau.se/nocode/)。また、C#またはASP.NET Coreに関連していない場合は、関係のないタグを削除してください。コードがなければ、関連性があるかどうかはわかりません。 – john

+0

私はルータのアウトレットや共有レイアウトを変更していません。私はタイトルにそれを含めたと思っていましたが、これは.NET Core 2の新しい角型テンプレートです。 – Qumbaala

+1

コードを見ずに問題と解決策を推測できます。そして、うまくいかない場合は、同じ質問をもう一度お願いします。子ビューで外部レイアウトまたは共有レイアウトを再利用するかどうかを確認できます。 –

答えて

1

興味のある方は、私の質問に答えを見つけました。この問題は、ブラウザアニメーションモジュールを含めることによって発生します。追加oldRootElem!.remove();下のoldRootElem!.parentNode!.insertBefore(newRootElem、oldRootElem); boot.browser.tsでは、新しいビューを追加した後に古いビューを破棄して問題を修正します。

関連する問題