Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular 2 (Pipes (Para passar parametro pro pipe, usar : (colocar o valor…

- - - - [ngStyle]="{
        
        'backgroundColor': (ativo ? 'blue' : 'grey'),
        
        'color': (ativo ? 'white' : 'black'),
        
        'fontWeight': (ativo ? 'bold' : 'normal'),
        
        'fontSize': (tamanhoFonte + 'px')
      - }"
  - - - Preferir usar o Renderer
- - - - Criar uma array constante com as rotas e tipar de Array
        
        exportar a config das rotas com uma const do tipo ModuleWithProviders, passando o RouterModule.forRoot (rotas)
    - - o routerLink pode ser usado tbm como property-binding:
        [routerLink]=''
        e tbm pode receber paramentros da seguinte forma:
        [routerLink]="['cursos', id]"
    - - diretiva de query
        [queryParams]
    - - Carregamento sob demanda para melhor performance
      - Dentro do modulo de roteamento raiz, criar um path para o roteamento do outro componente, por exemplo cursos.Ficando assim:
        {path: 'cursos' loadChildren: 'app/cursos/cursos.module#CursosModule' (caminho ate o modulo do outro componente e o nome do componente com #antes)
      - Deve-se deletar o import do Modulo o qual sera usado para lazy-loading..por exemplo o import do CursosModule dentro do modulo raiz.
      - remover o path cursos do modulo de rotamento do cursos, pq o mesmo ja foi configurado no modulo de roteamento raiz.
    - - implementar a interface CanActivate no serviço que sera o guarda.
        passar como parametro dessa interface o route e o state sendo eles das classes ActivatedRouteSnapshot e RouteStateSnapshot
        
        Ficaria mais ou menos assim:
        canActivate(
        route: ActivatedRouteSnapshot,
        state: RouteStateSnapshot
        ) : Observable<boolean> | boolean {
        logica....
        return true;
        else
        return false;
        }
      - Para usar o guarda ir até o modulo de roteamento raiz e usar a interface criada.
        
        Ficando algo assim:
      - Existem guardas de rotas filhas
        
        Eles devem implementar a interface CanActivateChild passando como parametro route e state. e retornando um observable booleano ou uma promise booleana ou simplesmente um valor booleano.
      - as variaveis route e state possuem varias informacoes para usar na logica de programação.
      - A interface canDeactivate é usada para desativar o guarda numa certa rota...
        
        o formato dela é parecido com a canActivate...
        a classe deve implementar o CanDeactivate<tipoDaClasse>
        canDeactivate(
        component: AlunoFormComponent(deve ser o mesmo do tipo da classe CanDeactivate),
        route,
        state
        e retornar um observable booleano ou promise ou somente um valor booleano.
      - resolver
        
        serve para carregar algo antes de mandar para o browser
        
        usa-se da mesma forma dos outros guards...
        exemplo:
        o serviço implementa a interface Resolve<tipo>{
        constructor(private alunosService: AlunosService){}
        resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
        ) : Observable<any> | Promise<any> | any{
        let id = route.params['id'];
        return this.alunosService.getAlunoByID(id);
        }
        
        no serviço de rotas usar:
        resolve: { aluno: AlunoDetalheResolver}
      - canResolve
        Como não carregar o módulo sem permissão
        
        canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
        return ...
        }
    - - { path: '**', component: PaginaNaoEncontradaComponent}
- - - - // this._renderer.setElementStyle(
      - // this._elementRef.nativeElement,
      - // 'backgroundColor',
      - // 'white'
      - // )
      - // }
    - - HostBinding('style.backgroundColor') backgroundColor : string
        
        HostListener('mouseenter') onMouseEnter(){
        
        this.backgroundColor = 'yellow';
        
        }
      - se precisar fazer alguma manipulacao com a propriedade antes de atribuir, fazer da seguinte maneira
        
        HostBinding('style.backgroundColor') get setColor(){
        
        return this.backgroundColor;
        
        }