常連

### やりたい事
Web画面の印刷

### 環境
OS:Windows 10 Pro
ブラウザ:Chrome バージョン: 67.0.3396.99（Official Build） （64 ビット）
Angular: 6.0.3
ngx-onsenui: ^4.2.0
onsenui: ^2.10.0

### 問題
スクロールが発生するWeb画面を印刷しようとすると、1Pageしか印刷できない。（2Page以降にも印刷する画面があるが切れている。印刷するとスクロールバーも印刷される）

### やった事
html内の<ons-page>タグを削除すると、全Page印刷することができた。ただし、画面のスクロールバーも消えた。

### 期待する事
htmlを変更せずに全Pageを印刷するにはどうしたらよいでしょうか？

### 印刷したい画面のHTML
```html
<ons-page>

    <ons-toolbar>
        <div class="center">ストップウォッチ</div>
    </ons-toolbar>

    <br>

    <div class="container-fluid">

        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ユーザー</th>
                                <th>開始</th>
                                <th>終了</th>
                                <th>H</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let work of works">
                                <td>{{work?.userId}}</td>
                                <td>{{work?.startedAt | date: 'yyyy/MM/dd HH:mm'}}</td>
                                <td *ngIf="!work?.isCompleted">{{nowDate | date: 'yyyy/MM/dd HH:mm:ss'}}</td>
                                <td *ngIf="work?.isCompleted">{{work?.finishedAt | date: 'yyyy/MM/dd HH:mm'}}</td>
                                <td class="column5" *ngIf="!work?.isCompleted"></td>
                                <td class="column5" *ngIf="work?.isCompleted">{{work?.time}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</ons-page>
```

スクロールの発生するWeb画面を全て印刷したい

### 前提・実現したいこと
VScodeがクラッシュ？または更新？があってから、ng serve をするとエラーがでるようになってしまった。
npm ls　をしてみたところ、以下のようなエラーがでていました。

エラーメッセージ
npm ERR! peer dep missing: @angular/common@^2.2.3, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/common@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: @angular/compiler@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: @angular/core@^2.2.3, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/core@^5.0.0, required by angular2-drag-scroll@1.5.2
npm ERR! peer dep missing: zone.js@^0.7.2, required by @angular/flex-layout@2.0.0-rc.1
npm ERR! peer dep missing: @angular/cdk@2.0.0-beta.12, required by @angular/material@2.0.0-beta.12

### 試したこと
・上記のものをインストールし直した　→　何故かインストールができない
・node_modulesの削除　→　キャッシュクリーン　→　npm install
・Angularcilを入れ直した
・npmのバージョンをあげてみた（通常は3.10.9です）

### 補足情報（FW/ツールのバージョンなど）
npm:3.10.9
node:6.9.2
webpack:1.14.0

npm ERR! peer dep missing ～　のエラーを解決したい

http通信にてjsonファイルの読み込みができず、ご教示いただければ幸いです。
モジュールの読み込みをしてHTTP通信用にサービスを追加。コンポーネントで呼び出してコンソールログ表示させるだけなのですが、なぜがファイルが見つからない。
ファイルパスを散々変えてはやっていますが、解決にいたらず。
以上、よろしくお願いします。

○コンソールのエラー内容
![![エラー画面](2678a722406b7f10cf12b7a387ec4875.png)](9eef47d4e77643c1e6e1b671b742a2c1.png)

参考の写経先は
[https://www.youtube.com/watch?v=8UOKgXr2I30&t=323s](https://www.youtube.com/watch?v=8UOKgXr2I30&t=323s)

○ファイル構造
```tree
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   └── my-data.service.ts
├── assets
├── data
│   └── student.json
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts

```
app.module.ts
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {HttpModule} from '@angular/http';
import {MyDataService} from './my-data.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, HttpModule
  ],
  providers: [MyDataService],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
app.component.ts
```typescript
import {Component, OnInit} from '@angular/core';
import {MyDataService} from './my-data.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';


  constructor(private newService: MyDataService) {
  }

  ngOnInit() {

    this.newService.fetchData()

  }
}
```

my-data.service.ts
```typescript
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class MyDataService {
  private url = './src/data/student.json';

  constructor(private http: Http) {
  }

  fetchData() {
    this.http.get(this.url).subscribe(
      (data) => console.log(data)
    )
  }


}
```

angularにて内部jsonファイルの読み込みについて

XMLHttpRequest cannot load localhost:3000/api/posts. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

という風なエラーがでます。調べたところ、Chromeのセキュリティを下げて起動させることで、正常にデータが取得できるようですが、できませんでした。以下の方法です。

open /Applications/Google\ Chrome.app/ --args --disable-web-security

原因がさっぱりわかりません。一番わからないのは、同様なアプリがあるのですが、それは正常に動作します。そのアプリとの違いはほとんどないように思えるのですが。

Chromeのクロスドメイン制約に引っかかる

タイトルの通りです。

以下に示すコードで、ChildComponentからParentComponentのsayHello()メソッドを呼びたいときに、どのように記述したらよいでしょうか？ 

**親コンポーネント**
```typescript
import { Component, OnInit } from '@angular/core';
import { Injectable, Inject } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent implements OnInit {

  constructor() { }
  
  ngOnInit() {
  }

  public sayHello(){
    console.log('Hello');
  }

}

```

**子コンポーネント**
```typescript
import { Component, OnInit } from '@angular/core';
import { Injectable, Inject } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="onClick()">クリック</button>
  `
})
export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onClick() {
    // 何を書けば良いか？
  }
}

```

子コンポーネントから親コンポーネントのメソッドを呼びたい

### 前提・実現したいこと
Angular初心者です。
現在、プルダウンで選択できる画面を作成しようとしています。
selectで選択肢を表示させることはできたのですが、デフォルト値をselectedで指定しても、表示されずデフォルト値は何もない状態となってしまいます。
下記ソースでいうと、プルダウンのデフォルト値にはtype01が表示されてほしいのですが、実行してみるとデフォルト値は何もない状態となっており、プルダウンを開くとtype01, type02, type03が表示されています。
解決方法をご教授いただけますと幸いです。

### 該当のソースコード
template.html
```html
<select[(ngModel)]="selectedType">
  <option*ngFor="let type of types" [selected]="type.id=='0'"[value]="type.id">
    {{type.name}}
  </option>
</select>
```

AppComponent.ts
```typescript
private types: Object;

export class AppComponent implements OnInit {

  const SEARCH_TYPE=[
    {
      name:'type01',
      id:0
    },
    {
      name:'type02',
      id:1
    },
    {
      name:'type03',
      id:2
    }
  ];

  constructor() {
    types = getTypes();
  }

  getTypes() {
    return SEARCH_TYPE;
  }

}
```

### 試したこと
書き方が悪いのかと思い、下記方法でも試しましたが、こちら選択肢（type01...）自体表示されませんでした。
```html
<select ng-model="selectedType" ng-options="type.name for type in types"></select>
```

### 補足情報（FW/ツールのバージョンなど）
Angular: 5.1.2

ご教授お願いいたします。

Angularでプルダウン(select)のデフォルト値を設定する

###前提・実現したいこと
Angular2において、特定の項目にフォーカスを設定したい。
具体的には「編集開始」ボタンをクリックするとテキストボックスが表示され、そこにフォーカスをあてたい。

###該当のソースコード
component.html
```
<div *ngIf="isEditing">
   <input type="text" id="txtEditor" placeholder="入力してください" />
</div>
<div *ngIf="!isEditing" (click)="beginEdit()">
   編集開始      
</div>
```
component.ts
```
beginEdit(event: any) :void
{
   this.isEditing= true;
   ★ここに「txtEditor」コントロールにフォーカスをセットするコードを記述？
}

```

Angular2でのフォーカス設定について

### 前提・実現したいこと

データをグラフとして表示するためのWebアプリケーションを作成中で、
フロント側でAngular5のrouterを使ってルーティングを行なっており、
パスからパラメータを取ってきており、
パラメータに従ってサーバ側にリクエストしてデータを取得し、表示しています。
ルーティングのパス指定としては以下のようになっており、
```typescript
{ path: 'top/:year/:key', component: TopComponent}
```
例えば、top/2017/quarter:1 というパスで2017年度第1四半期のデータを表示するといった具合です。

画面の表示としては、サイドバーのコンポーネント(SideNavComponent)と
メインの表示のコンポーネント(TopComponent)の2つのコンポーネントから1画面が構成されています。
メイン画面は`ngOnInit()`の中でサーバへのリクエストを飛ばしています。
サイドバーで表示したいグラフのパラメータを設定し、
サイドバーの表示ボタンを押すとメイン画面にグラフが表示されるようにしたいです。

### 発生している問題・エラーメッセージ

サイドバーの表示ボタンを押した時の処理として
```typescript
this.router.navigate(['top/' + this.year + '/' + this.key]);
```
という具合にAngularのrouterを使ってルーティングしているのですが、
表示ボタンを押してもurlが変わるだけで表示は変わりません。

### 試したこと

3つほど試しました。
0. ルーティング後にリロード
表示ボタンを押した時の処理の最後に`location.reload();`を加えることで、リロードして表示を変更することができました。しかし、これだと見た目が悪い上にビルドしてサーバに上げた時にurl直打ちと同じ状態になってしまうため表示してくれませんでした。
0. `ngOnInit()`の呼び出し
表示ボタンを押した時にTopComponentの`ngOnInit()`を呼び出したのですが、パスのパラメータを取ってきてくれず、undefined状態になっていました。
0. `ngDoCheck()`でのリクエスト
TopComponentの`ngOnInit()`でリクエストを飛ばすのではなく、`ngDoCheck()`でリクエストを飛ばすようにしましたが、常にリクエストを送っている状態になってしまいました。

質問がわかりづらかったらすみません。要約すると、同じコンポーネントへのルーティングでも表示を変更するようにできるかどうかが知りたいです。よろしくお願いします。