動画で学ぶJHipster (8) （UIの強化）

参考動画

参考テキスト

Hot Module Replacementの有効化

（以下テキスト（の日本語訳））
JHipsterで生成されたアプリケーションでUI開発を行う場合、ファイルを保存するとすぐに変更を確認できると便利です。JHipsterは、Browsersyncとwebpackを使用してこの機能を強化します。この機能を有効にするには、blogディレクトリで次のコマンドを実行します。

npm start

＜＜
npm startで、ng serve --hmrを起動していました。ng serve はAngularのコマンドで、https://angular.io/cli/serve によると、--hmrオプションは、Hot Module Replacement (HMR) を有効化するオプションらしいです。

加えて(別コンソールで)バッグエンドで、mvnwで起動しておく必要がありました。

1. HTMLを許可する（エスケープしないようにする）

現状だと、ブログ投稿のContentに書いたHTMLがエスケープされてしまいます。(h1タグで囲まれたlife is groovyの部分)

これを修正するために、以下の変更を行います。

src / main / webapp / app / entity / post / list / post.component.html
の

<td>{{ post.content }}</td>

を、

<td [innerHTML]="post.content"></td>

に変更する。

保存すると、HMRのお陰で即座に変更が反映されます。

画面上の文字が大きくなりました。

2. レイアウトを改善する

レイアウトをテーブル形式からblogのような感じに変更します。

<div class="table-responsive"> の子要素も含めてすべて以下のコードに置き換えます。

どうもテキストのコードは間違っていて、動画内のコードが正しいようです。（テキストのコードはコンパイルエラーになりました。。）

<div class="table-responsive" *ngIf="posts && posts.length > 0">
	<div infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
	  <div *ngFor="let post of posts; trackBy: trackId">
		<a [routerLink]="['/post', post.id, 'view' ]">
		  <h2>{{post.title}}</h2>
		</a>
		<small>Posted on {{ post.date | formatMediumDatetime }} by {{ post.blog?.user?.login }}</small>
		<div [innerHTML]="post.content"></div>
		<div class="btn-group mb-2 mt-1">
		  <button type="submit"
				  [routerLink]="['/post', post.id, 'edit']"
				  class="btn btn-primary btn-sm">
			<fa-icon [icon]="'pencil-alt'"></fa-icon>
			<span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
		  </button>
		  <button type="submit"
				  (click)="delete(post)"
				  class="btn btn-danger btn-sm"
				  date-cy="entityDeleteButton">
			<fa-icon [icon]="'times'"></fa-icon>
			<span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
		  </button>
		</div>
	  </div>
	</div>
</div>

すると、画面は以下のようになりました。

変更前：テーブル状

変更後：ブログっぽい感じに。

コード