角度2送信配列別のページ

Question

私は角度を使って天気アプリケーションを開発しています。角度は新しいです。私が選んだ都市の気象情報を持っていきたい。しかし、私は2番目のページにデータを送信できませんでした。問題はどこだ？ご協力いただきありがとうございます。

export class ForecastComponent implements OnInit, OnDestroy { 
 
    
 
    constructor(private service: WeatherService, private router: Router, private route: ActivatedRoute) { } 
 

 
    public items: Array<string> = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"]; 
 

 
    public selectedValue: BaseModel; 
 
    value: any = {}; 
 
    weatherClass: Weather; 
 

 
    ngOnInit() {} 
 

 
    ngOnDestroy(): void { 
 
    this.route.data.subscribe(
 
     (data: { weatherClass: Weather }) => { 
 
     this.weatherClass = data.weatherClass; 
 
     } 
 
    ) 
 
    } 
 
    public selected(value: any): void { 
 
    console.log('Selected value is: ', value); 
 
    } 
 

 
    public removed(value: any): void { 
 
    console.log('Removed value is: ', value); 
 
    } 
 

 
    public typed(value: any): void { 
 
    console.log('New search input: ', value); 
 
    } 
 

 
    public refreshValue(value: any): void { 
 
    this.value = value; 
 
    } 
 
    sendCityWeather(value: Array<BaseModel>) { 
 
    this.service.otherWeather(this.value.text).subscribe(
 
     (data) => { 
 
     this.weatherClass = new Weather(data.name, data.main.temp, data.weather[0].description, data.main.temp_min, data.main.temp_max, data.weather[0].icon); 
 
     console.log(this.weatherClass); 
 
     this.router.navigate(['/weather']); 
 
     } 
 
    ) 
 
    } 
 
}

export class WeatherComponent implements OnInit, OnDestroy { 
 

 
    weatherClass: Weather; 
 
    value: any = {}; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 
    
 
    ngOnInit() { 
 
    this.service.otherWeather(this.value.text).subscribe(
 
     (data: Weather) => { 
 
     this.weatherClass = data; 
 
     } 
 
    ) 
 
    } 
 

 
    ngOnDestroy(): void { 
 
    }

export class WeatherService { 
 

 
    weatherClass: Weather; 
 

 
    constructor(private http:Http) { } 
 

 
    otherWeather(city:string){ 
 
    return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response:Response) => response.json()); 
 
    
 
    } 
 
}

Answer 1

あなたはcomponeにデータを渡すことができる2つの方法があります。 nts、EventEmmiters @Output()またはEventReceiver @Input()またはサービスを使用してください。 子コンポーネントに@Input()の子コンポーネントにデータを渡すことができます。次に例を示します。

@Component({ 
 
    selector: 'app-parent', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ParentComponet implements OnInit { 
 

 
    parentData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 

 
    } 
 

 
} 
 

 

 
@Component({ 
 
    selector: 'app-child', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ChildComponet implements OnInit { 
 

 
    @Input() childData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 

 
    } 
 

 
}

<!-- Parent html --> 
 

 
<app-child [childData]="parentData"></app-child>

上記app-childにデータを渡しますが、この方法は、親コンポーネントに子コンポーネントをインポートする必要があります。

私は、コンポーネントとしてではなくサービスとして追加することができるため、サービス手法を好んでいます。以下はその一例である。この方法で

export class WeatherService { 
 

 
    weatherClass: Weather; 
 
    
 
    //BehaviorSubject can store the last value given until the service destroyed or otherwise changed 
 
    private data: BehaviorSubject<Weather> = new BehaviorSubject(null); 
 

 
    constructor(private http: Http) {} 
 

 
    otherWeather(city: string) { 
 
    return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response: Response) => response.json()); 
 
    } 
 
    
 
    setData(value: Weather) { 
 
    this.data.next(value); 
 
    } 
 
    
 
    getData(): Observable<Weather> { 
 
    return this.data.asObservable(); 
 
    } 
 
}

@Component({ 
 
    selector: 'app-parent', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ParentComponet implements OnInit { 
 

 
    parentData: Type = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"];; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
    this.service.otherWeather(this.value.text).subscribe((data: Weather) => { 
    this.service.setData(data); 
    }); 
 
    } 
 

 
} 
 

 

 
@Component({ 
 
    selector: 'app-child', 
 
    templateUrl: './child.component.html', 
 
    styleUrls: ['./child.component.css'] 
 
}) 
 

 
export class ChildComponet implements OnInit { 
 

 
    childData: Weather; 
 

 
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {} 
 

 
    ngOnInit() { 
 
    this.service.getData.subscribe((vales: Weather) => { 
 
     this.childData = vales; 
 
    }); 
 
    } 
 

 
}

、あなたはデータがstraightaway返されないとコードが待機しないだろうことがわかりますデータのために。 subscribe()ブロック内のデータに関連するTypeScriptロジックを実行する必要があります。値が変更されると、HTML自体が更新されます。 BehaviorSubjectの値が変更されたときにこのメソッドを使用すると、getData()メソッドにサブスクライブされている場所でも新しいデータが受信されます。

助けが必要な場合はコメントを入力してください。