Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2018, 21:51
Интересующийся
Отправить личное сообщение для AndreyAndreyKiev Посмотреть профиль Найти все сообщения от AndreyAndreyKiev
 
Регистрация: 19.07.2018
Сообщений: 15

Angular 2. Помогите, ошибка (Routing)
Ребята, доброго времени суток, помогите решить ошибку в тестовом задании

Ошибка - При активации функции selectEdit(i) в компоненте навигации, в <router-outlet /> открывается компонент с информацией, срабатывает ngOnInit, всё супер. Но при повторном активации этой функции путь меняется (например с /edit-book/1 на /edit-book/2) и ngOnInit не срабатывает.
НужноНужно сделать чтобы при каждом срабатывании функции selectEdit переменная form_name в компоненте с информацией была равна значению edit_id в сервисе.


Код сервиса
import { Book } from "../model/book";

export class BookService {

    private data: Book[] = [
        {name:"BookTest", page:316, genre:"Fantastic"},
        {name:"BookFirst", page:190, genre:"Triller"}
    ];

    getData(): Book[] {
        return this.data;
    }
    addData(name:string, page:number, genre:string){
        this.data.push(new Book(name, page, genre));
    }
    editData(name:string, page:number, genre:string){
        this.data[this.edit_id].name = name;
        this.data[this.edit_id].page = page;
        this.data[this.edit_id].genre = genre;
    }

    public edit_id:number;

}


Тип данных
export class Book {
     
    constructor(public name: string, public page: number, public genre: string) { }

}


Код компонента с навигацией
import { Component, OnInit } from "@angular/core";
import { Book } from "../model/book";
import { BookService } from "../BookService/BookService.service";
import { Router } from "@angular/router";

@Component({
    selector:"comp-main",
    templateUrl:"app/Component/app.component.html"
})
export class AppComponent implements OnInit{
    
      items: Book[] = [];

      constructor(private dataService: BookService, private router: Router){ }
      
      addItem(name:string, page:number, genre:string){
          this.dataService.addData(name, page, genre);
      }

      ngOnInit(){
          this.items = this.dataService.getData();
      }

      delete(i:number){
          this.items.splice(i,1);
      }

      selectEdit(i:number){
          this.router.navigate(["edit-book",i+1]);
          this.dataService.edit_id = i;
      }

}


Код компонента с информацией
import { Component, OnInit } from "@angular/core";
import { Book } from "../model/book";
import { BookService } from "../BookService/BookService.service";
import { Router } from "@angular/router";

@Component({
     selector:"comp-edit",
     templateUrl:"app/edit-book/app.component.edit-book.html"
})
export class AppComponentEdit implements OnInit{

    items: Book[] = [];

    constructor(private dataService: BookService, private router: Router){ }
    
    addItem(name:string, page:number, genre:string){
        this.dataService.addData(name, page, genre);
    }

    ngOnInit(){
        this.items = this.dataService.getData();
        console.log(this.dataService.edit_id);
        this.form_name = this.items[this.dataService.edit_id].name;
    }
    
    form_name:string;

}
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2018, 22:28
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

AndreyAndreyKiev,
В коде нет ошибки. Это стандартное поведение работы Ангуляра, о чем в принципе в документации написано. То есть если у вас активен какой-то роутовский компонент и вы переходите на точно такой же урл этого компонента, меняя только параметры, то компонент удаляться из DOM и заново отрисовываться не будет. Поэтому ngOnInit и не срабатывает второй раз.
А решение этой проблемы очень простое. Необходимо сделать inject сервиса ActivatedRoute в "Код компонента с информацией" и подписываться на params https://angular.io/api/router/ActivatedRoute
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2018, 23:23
Интересующийся
Отправить личное сообщение для AndreyAndreyKiev Посмотреть профиль Найти все сообщения от AndreyAndreyKiev
 
Регистрация: 19.07.2018
Сообщений: 15

А можете подробнее описать как это сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2018, 07:29
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

AndreyAndreyKiev,
В сервисе edit_id совсем необязателен, потому что этот параметр можно получить из url. Но раз так сделано...
import { ActivatedRoute, Params } from '@angular/router';

constructor(private dataService: BookService, private router: Router, private route: ActivatedRoute ){ }

ngOnInit(){
        this.items = this.dataService.getData();
        this.route.params.subscribe((params: Params) => {
            console.log(this.dataService.edit_id);
            this.form_name = this.items[this.dataService.edit_id].name;
        })
    }
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2018, 12:33
Интересующийся
Отправить личное сообщение для AndreyAndreyKiev Посмотреть профиль Найти все сообщения от AndreyAndreyKiev
 
Регистрация: 19.07.2018
Сообщений: 15

Спасибо большое
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ошибка htaccess на релизе angular. charlibaket Angular.js 0 17.06.2017 20:03
Ребята помогите какая ошибка в скрипте php? xddanik Серверные языки и технологии 2 25.04.2015 21:44
Помогите найти где кроется ошибка. Kylak Ваши сайты и скрипты 9 31.03.2013 14:29
ошибка в setAttributeNode - помогите пожалуйста Dron13 Events/DOM/Window 1 14.01.2011 23:20
Ошибка в jquery.forms ? Помогите разобраться. Ксандер jQuery 10 26.08.2009 18:39