【Angular】電子書籍っぽいサイトの技術的なとこ

2018/6/18 angular

1 プログラマーならソースで語れ

プログラマーならソースで語れ

全ソースはgithubにあげてます。詰まったところや忘れそうなところをメモ。

base href

自分のbase hrefを取得する機能はAngularには無いっぽいけど、標準JSで取得可能です。

public baseHref = (document.getElementsByTagName('base')[0] || {})['href'];

1	public baseHref = (document.getElementsByTagName('base')[0] \|\| {})['href'];

改行記号

改行記号はOSに依存するのは昔話。とりあえず何でも来いと力技でやってみたけどきちんと動いているっぽい

let title = str.split(/\n|\r\n|\r/)[0];

1	let title = str.split(/\n\|\r\n\|\r/)[0];

URLを変更する

SPAはコンポーネント操作の場合はURLは変わらない。routerの場合は変わるけどね。見た目的にもURLを変えたい場合はreplaceStateで帰れる。上記で説明したBase hrefと一緒に使用し、ヒストリーにも登録してたりする。

        window.history.replaceState('', '', `${this.baseHref}#/${this.targetPage}`);
        window.history.pushState('', '', `${this.baseHref}#/${this.targetPage}`);

1 2	window.history.replaceState('', '', `${this.baseHref}#/${this.targetPage}`); window.history.pushState('', '', `${this.baseHref}#/${this.targetPage}`);

HttpClientはデフォルトでJSON

AngularのHttpClientはデフォルトでJSON形式のデータを取得します。なのでmarkdownファイルを取得しようとするとエラーが発生。markdown形式でも所詮テキストなのでresponseTypeにtextを指定する必要がある。

this.http.get('/path/to/get.php', { responseType: 'text' })
  .subscribe( data => console.log(data) , error => console.log(err));

1 2	this.http.get('/path/to/get.php', { responseType: 'text' }) .subscribe( data => console.log(data) , error => console.log(err));

動的HTML

bindを使用してHTMLを動的に描画しようとしてもエスケープされてしまう(すっごい親切・安全)。innerHTMLを使えば安全性を無視してしまうが動的にHTMLを差し込むことができる。

<div [innerHTML]='nowContents'></div>

1	<div [innerHTML]='nowContents'></div>