Angular: Вопросы и ответы на собеседовании

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  @Input() productId: number;
  @Output() addToCart = new EventEmitter<number>();
  
  constructor(private productService: ProductService) {}
  
  ngOnInit() {
    // Инициализация компонента
  }
  
  onAddToCart() {
    this.addToCart.emit(this.productId);
  }
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private user: User | null = null;
  
  login(credentials: Credentials): Observable<User> {
    // Логика авторизации
  }
  
  isAuthenticated(): boolean {
    return !!this.user;
  }
}

export class UserComponent {
  constructor(private userService: UserService) {}
  
  getUsers() {
    return this.userService.getAll();
  }
}

@Component({...}) // Определяет класс как компонент
@Injectable({...}) // Делает сервис инжектируемым
@Input() // Помечает свойство как входное
@Output() // Определяет событие для коммуникации
@ViewChild() // Дает доступ к дочернему элементу
@HostListener() // Подписывается на события от элемента-хоста

function Log() {
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    
    descriptor.value = function(...args: any[]) {
      console.log(`Calling ${propertyKey} with:`, args);
      return originalMethod.apply(this, args);
    };
    
    return descriptor;
  };
}
 
// Использование
class ApiService {
  @Log()
  getData(id: string) {
    // Какая-то логика
    return id;
  }
}

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [CommonModule, SharedModule, UserRoutingModule],
  providers: [UserService]
})
export class UserModule { }

// Пример использования RxJS в сервисе
@Injectable()
export class DataService {
  private dataSubject = new BehaviorSubject<User[]>([]);
  data$ = this.dataSubject.asObservable();
 
  loadUsers() {
    this.http.get<User[]>('/api/users')
      .pipe(
        map(users => users.filter(user => user.active)),
        catchError(error => {
          console.error('Error loading users', error);
          return of([]);
        })
      )
      .subscribe(users => this.dataSubject.next(users));
  }
}

@Injectable()
export class StoreService {
  private state = new BehaviorSubject<AppState>(initialState);
  state$ = this.state.asObservable();
  
  updateUser(user: User) {
    const currentState = this.state.getValue();
    this.state.next({...currentState, user});
  }
}

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserCardComponent {
  @Input() user: User;
}

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', component: NotFoundComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// В шаблоне
<a [routerLink]="['/products', product.id]">{{ product.name }}</a>
 
// В компоненте
constructor(private router: Router) {}
navigateToProduct(id: number) {
  this.router.navigate(['/products', id]);
}

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { 
    path: 'admin', 
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) 
  }
];

{{ dateValue | date:'shortDate' }}
{{ price | currency:'RUB' }}

@Pipe({ name: 'shorten' })
export class ShortenPipe implements PipeTransform {
  transform(value: string, limit: number): string {
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

// app.server.module.ts
@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() appHighlight: string;
  
  constructor(private el: ElementRef) {}
  
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.appHighlight || 'yellow');
  }
  
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

// Пример использования Angular Elements
@Component({...})
class UserProfileComponent { /* ... */ }
 
// Конвертация в веб-компонент
const userProfileElement = createCustomElement(UserProfileComponent, { injector });
customElements.define('user-profile', userProfileElement);

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <input name="email" ngModel required email>
  <button type="submit" [disabled]="!myForm.valid">Отправить</button>
</form>

// В компоненте
this.form = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]]
});
 
// В шаблоне
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email">
  <div *ngIf="form.get('email').invalid && form.get('email').touched">
    Некорректный email
  </div>
</form>

function passwordMatchValidator(control: AbstractControl) {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');
  
  if (password.value !== confirmPassword.value) {
    return { passwordMismatch: true };
  }
  
  return null;
}

@Injectable()
export class UserService {
  constructor(private http: HttpClient) {}
 
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users')
      .pipe(
        retry(3), // Повторить запрос до 3 раз при ошибке
        map(users => users.filter(user => user.active)),
        catchError(error => {
          console.error('Ошибка при загрузке пользователей', error);
          return of([]); // Вернуть пустой массив в случае ошибки
        })
      );
  }
}

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}
 
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.authService.getToken();
    
    if (token) {
      const authReq = req.clone({ 
        headers: req.headers.set('Authorization', `Bearer ${token}`) 
      });
      return next.handle(authReq);
    }
    
    return next.handle(req);
  }
}

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

@Injectable()
export class ChatService {
  private socket$: WebSocketSubject<any>;
  
  connect(): Observable<Message> {
    this.socket$ = webSocket('wss://chat.example.com');
    return this.socket$.asObservable();
  }
  
  sendMessage(message: string): void {
    this.socket$.next({ type: 'message', content: message });
  }
}

describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CounterComponent ]
    }).compileComponents();
 
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 
  it('должен увеличивать счетчик при клике', () => {
    const initialValue = component.counter;
    component.increment();
    expect(component.counter).toBe(initialValue + 1);
  });
});

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private notificationService: NotificationService) {}
  
  handleError(error: any): void {
    console.error('Произошла ошибка:', error);
    this.notificationService.showError('Что-то пошло не так');
    // Тут можно добавить логирование в сервис аналитики
  }
}

// Опасно! Прямое внедрение HTML
this.element.nativeElement.innerHTML = userInput;
 
// Также опасно при использовании
<div [innerHTML]="userContent"></div>

constructor(private sanitizer: DomSanitizer) {}
 
getSafeHtml(html: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

// В шаблоне
<h1 i18n="@@welcomeHeader">Добро пожаловать</h1>
 
// В файле перевода messages.xlf
<trans-unit id="welcomeHeader">
  <source>Добро пожаловать</source>
  <target>Welcome</target>
</trans-unit>

// Сервис перевода
translateService.use('en');
 
// В шаблоне
<h1>{{ 'WELCOME_MESSAGE' | translate }}</h1>

private destroy$ = new Subject<void>();
 
ngOnInit() {
  this.dataService.getData()
    .pipe(takeUntil(this.destroy$))
    .subscribe(data => this.data = data);
}
 
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}