Angular5でブログ的な記事の管理をしたい

前提・実現したいこと

Angular5でブログ的な記事の管理をしたい。

発生している問題・エラーメッセージ

Angularの勉強のためにルーティング機能を使ってWebサイトを作っています。
あるページに記事一覧を作り、ルーティング機能によりタップされた記事のIDをメインの詳細を表示するコンポネートに渡すところまでは出来ましたが、記事の内容をどのように管理すれば良いかがわかりません。
例えば
一覧画面（1つのコンポネート）0をタップ
→詳細画面（1つのコンポネート）0を受け取る
の時詳細画面が表示する内容をIDによって切り替えたいのです。
全ての記事数だけコンポネートを作るわけにはいかないので、どのように管理するのが良いのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

https://angular.io/guide/routerの

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },  ←ここ！！
  {
    path: 'heroes',

idにより表示データを変更してます。

ここ→https://stackblitz.com/angular/qlxeapqdekqでサンプルが動かせます

実装したいところは、上部のHeroesボタンから、各ヒーローを押したときにNo毎のデータが表示されます。

追記

記事では例えば画像を貼ったり貼らなかったりtableを埋め込んだり簡単に言うとコンポーネントにHTMLを渡してその中に表示してもらいたい

idなどからDBにHTMLテキストを取得する関数を作成し、それをinnerHTMLで書き込む手もありますね。
画像のURLなどは絶対パスの方が安全な気がします。

// hogehoge.html
<div [innerHTML]='get記事()'></div>

そもそもAngularでブログを作るという目的自体が用途にあっていないのでしょうか？

ここは私的な意見が強いので

現状で言うとAngularで作らずWordpressを使えばいいのでは？となりますが、Angularで作られたブログシステムがあっても別に良いのではないかと（Wordpress一強は面白くないですし）

SSR(server side rendering)をしない前提で言えばAngularはどのようなシステムに向いてるかといえば滞在時間が長いサイトや業務系などでしょうか具体的には

SNS(新しい記事がリアルタイムに受信できたり)
ツール系
社内システム

逆にブログは滞在時間は短いですし、トップページから訪問する可能性よりlinkにより記事に直接行く場合もあるのでSPAは不利かもしれません。
Angularの仕様上、先にロジックを読む必要がありますしrouterのURLを直接ブラウザに打っても404エラーで表示されません。(開発環境では表示してくれるのに＞＜)

さらにSSR無しではSEO的に不利と言われています。Googleのどこかの技術ブログにはSPAでもbotにて記事内容を取得し評価できるようにするみたいな事が書かれていた記憶がありますがありますが、Google以外でそういう記事を見た事は無いですね。AngularはGoogle主体(大げさか)で作らえているので検索したいと思いますが他検索サイトはSPAのシェア次第でどう行動するか変わると思いますよ。

長くなりましたが、私的結論では「今は用途的に向いてない」のであって未来はわからないが、「有ったら面白そう」という感じですね。

投稿2018/03/07 08:01

編集2018/03/09 04:10

mosapride

総合スコア1480

lxyzm

2018/03/08 02:29

回答ありがとうございます。Heroクラスによって表示されるテキストを変更できるということですね。やりたいことはこれに近いのですが、記事では例えば画像を貼ったり貼らなかったりtableを埋め込んだり簡単に言うとコンポーネントにHTMLを渡してその中に表示してもらいたいのです。何か良い方法はありますでしょうか？またはそもそもAngularでブログを作るという目的自体が用途にあっていないのでしょうか？