<main>
<section>
<child-component></child-component>
</section>
<another-child-component></another-child-component>
</main>
switchMap((token) => {
console.log(token)
const headers = new HttpHeaders().set(
'Authorization',
'bearer ' + token.id_token
);
return this.httpClient.get('http://143.167.112.46:3001/api/protected/user-info', {headers}).pipe(
map(user => {
return { user, token }
})
)
}),
mergeMap({ user, token }) => {
console.log(user, token)
this.router.navigate(['/']);
return [
{
type: AuthActions.SIGNIN
},
{
type: AuthActions.SET_TOKEN,
payload: token
}
];
});
this.httpClient.get('http://143.167.112.46:3001/api/protected/user-info', {headers})
и все остальные запросы к серверу в сервис. trigger('fadeInOut', [
transition(':enter', [style({
width: '59px',
border: 'none',
}),
animate(3000, style({
width: '*',
border: 'solid 1px #ebebeb',
}))],
),
transition(':leave', [
animate(3000, style({
width: '59px',
border: 'none',
}))],
),
])
<div *ngIf="authTokenService.currentUserData">
почемуто не выводится установленная по умолчанию аватарка
import { SafeUrl, DomSanitizer } from '@angular/platform-browser'
@Any()
export class Any {
public defaultAvatarUrl: SafeUrl
constructor(private readonly sanitizer: DomSanitizer) {
this.defaultAvatar = this.sanitizer.bypassSecurityTrustUrl(
'assets/img/empty_photo.png'
)
}
}
public get userAvatar(): SafeUrl {
return this.sanitizer.bypassSecurityTrustUrl(
this.authTokenService.currentUserData
? this.authTokenService.currentUserData.user_photo
: 'assets/img/empty_photo.png'
)
}
import {
Component,
ViewChild,
ViewContainerRef,
OnInit,
ComponentFactoryResolver,
Injector,
EmbeddedViewRef,
ElementRef
} from '@angular/core'
import { Type } from '@angular/core'
@Component({
selector: 'app-root',
template: '<h1>Скомпилируй</h1> <div #outlet></div>',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public title = 'app'
public AnyComponent
@ViewChild('outlet') outlet: ElementRef
constructor(
private readonly factoryResolver: ComponentFactoryResolver,
private readonly injector: Injector
) {}
public ngOnInit() {
this.appendComponent(this.AnyComponent)
}
public appendComponent<T>(component: Type<T>) {
const componentRef = this.factoryResolver
.resolveComponentFactory(component)
.create(this.injector)
const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
.rootNodes[0] as HTMLElement
this.outlet.nativeElement.appendChild(domElem)
}
}
import { Injectable, Injector } from '@angular/core'
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest
} from '@angular/common/http'
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/throw'
import 'rxjs/add/operator/catch'
@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
console.log('intercepted request ... ')
return next.handle(req).catch((error, caught) => {
// Проверяем код ошибки. Берём роутер и перенаправляем куда вам угодно.
return Observable.throw(error)
}) as any
}
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent extends HelloComponent { // Вот тут
name = 'Angular 6';
constructor() {
super(); // Первый console.log('...')
console.log('constructor app');
}
}
<hello name="{{ name }}"></hello> // Второй console.log('...')
<p>
Start editing to see some magic happen :)
</p>
<section>
<input [(ngModel)]=currentString>
{{currentString.length}}
</section>
<your-tooltip [hidden]="currentString.length > 10">
Lorem, ipsum.
</your-tooltip>
class EventEmitter {
constructor() {
const delegate = document.createDocumentFragment();
[
'addEventListener',
'dispatchEvent',
'removeEventListener'
].forEach(f =>
this[f] = (...xs) => delegate[f](...xs)
)
}
public addEventListener(event: string, callback: Function) {}
public removeEventListener(event: string, callback: Function) {}
public dispatchEvent(event: Event) {}
}
export class CustomLocalStorage extends EventEmitter {
private successSetEvent: Event
private errorSetEvent: Event
constructor(public prefix: string = 'local') {
super()
this.successSetEvent = new CustomEvent(`set:success`)
this.errorSetEvent = new CustomEvent(`set:error`)
}
public setItem(key: string, value: any) {
try {
localStorage.setItem(`${this.prefix}-${key}`, JSON.stringify(value))
this.dispatchEvent(this.successSetEvent)
} catch (error) {
this.dispatchEvent(this.errorSetEvent)
}
}
public getItem(key: string) {
return JSON.parse(localStorage.getItem(`${this.prefix}-${key}`))
}
}
const lStorage = new CustomLocalStorage('lStorage')
lStorage.addEventListener('set:success', function() {
alert('success')
})
lStorage.setItem('any', true)
setTimeout(function() {
lStorage.setItem('foo', {
a: 1,
b: 2
})
}, 2000)
[flight: true, passengers: true, customer: true, history: true]
const obj = {flight: true, passengers: true, customer: true, history: true}
Object.keys(obj).forEach(key => obj[key] = false)
<table class="table table-striped col-md-6">
<tr>
<th class="col-md-5">Полный адрес</th>
<th class="col-md-3">Координаты</th>
<th class="col-md-4">Комментарий</th>
<th></th>
</tr>
<tr
ng-init="data.edit = false"
ng-repeat="data in addressList"
ng-click="data.edit = !data.edit"
ng-hide="data.edit">
<td>{{data.address}}</td>
<td>{{data.latitude}} / {{data.longitude}}</td>
<td>{{data.description}}</td>
<td class="col-sm-2">
<button class="btn btn-danger" ng-click="removeAddress(data)">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
<tr ng-repeat="item in addressList" ng-show="item.edit">
<td><input type="text" ng-model="item.address"></td>
<td><input type="text" ng-model="item.latitude"><input type="text" ng-model="item.longitude"></td>
<td><input type="text" ng-model="item.description"></td>
<td><button class="btn btn-success" ng-click="close()">Сохранить</button><button class="btn btn-danger" ng-click="close()">Отмена</button></td>
</tr>
</table>