Javascript 角度组件html不呈现
如果有任何额外或缺失的信息，请让我知道 我想在现有angular应用程序中创建一个新组件，并将该组件呈现给现有页面/组件 问题： 该模板似乎未被使用 步骤：Javascript 角度组件html不呈现,javascript,angular,architecture,Javascript,Angular,Architecture,如果有任何额外或缺失的信息，请让我知道 我想在现有angular应用程序中创建一个新组件，并将该组件呈现给现有页面/组件 问题： 该模板似乎未被使用 步骤： import { Component, Injectable, Inject, OnInit } from '@angular/core'; import { CareersService } from '../../services/careers.service'; import { FormBuilder, Validators, F
import { Component, Injectable, Inject, OnInit } from '@angular/core';
import { CareersService } from '../../services/careers.service';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SelectListItem, AppSettings } from '../../settings/app.settings';
import { Education, HigherEducation, Language, WorkExperience, Applicant, Application } from '../../services/applicants.service';
import { CanActivate } from '@angular/router/src/interfaces';
import { LocationsService } from '../../services/locations.service';
import { StateItem } from '../../models/locations.models';
import { Location } from '@angular/common';
@Component({
selector: 'app-little-test',
templateUrl: '../../little-test/little-test.component.html',
styleUrls: ['../../little-test/little-test.component.css']
})
export class LittleTestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'application-header',
templateUrl: './applicationHeader.component.html',
styleUrls: ['./careers.component.css']
})
export class ApplicationHeaderComponent {
public currentStep: string = localStorage.getItem('appStep');
public applicationStepText: string;
public applicantDisabled: string;
public jobDisabled: string;
public educationDisabled: string;
public experienceDisabled: string;
public reviewDisabled: string;
public selectedJobTitle: string;
public selectedLocation: string;
public selectedCity: string = localStorage.getItem('selectedCity');
public selectedState: string = localStorage.getItem('selectedState');
constructor(public careerService: CareersService, private app: AppSettings) {
//this.currentStep = localStorage.getItem('appStep');
switch (this.currentStep) {
case 'Demographics':
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'ApplicantInfo':
this.applicationStepText = "Applicant Information";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'JobInformation':
this.applicationStepText = "Job Information";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'WorkHistory':
this.educationDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'Education':
this.applicationStepText = "Education";
this.reviewDisabled = "disabled";
break;
case 'Review':
this.applicationStepText = "Review";
break;
case 'Acknowledgement':
default:
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
}
}
ngOnInit() {
var disabled = document.getElementsByClassName('disabled');
for (var d in disabled) {
if (disabled[d] != null && disabled[d].attributes != null) {
disabled[d].setAttribute('routerLink', '');
disabled[d].addEventListener('click', function (e) {
e.preventDefault();
});
}
}
}
}
@Component({
selector: 'demographics',
templateUrl: 'demographics.component.html',
styleUrls: ['careers.component.css'],
})
export class DemographicsComponent {
public error: string = this.careerService.error;
public form: FormGroup;
public isLoading: boolean;
public errorOccurred: boolean;
constructor(public careerService: CareersService, private router: Router, fb: FormBuilder, private app: AppSettings, private route: ActivatedRoute) {
this.form = fb.group({
gender: [''],
ethnicity: ['']
});
}
ngOnInit() {
var jobId = '';
var csc = '';
localStorage.removeItem(this.careerService.AccessKeyName);
localStorage.setItem('appStep', 'Demographics');
if (this.route.snapshot.params.csc != null && this.route.snapshot.params.jobId != null) {
localStorage.setItem("selectedJobId", this.route.snapshot.params.jobId);
localStorage.setItem("selectedLocation", this.route.snapshot.params.csc);
localStorage.setItem("referrer", this.route.snapshot.params.referrer);
this.careerService.selectedJobId = this.route.snapshot.params.jobId;
this.careerService.selectedLocation = this.route.snapshot.params.csc;
this.getJob();
}
else {
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null ) {
this.careerService.getSelectedLocationAndJob().subscribe(res => {
localStorage.setItem("selectedJobId", res.jobId);
localStorage.setItem("selectedLocation", res.csc);
localStorage.setItem("referrer", "scis");
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null || localStorage.getItem('selectedLocation') == '') this.errorOccurred = true;
this.getJob();
});
}
}
}
getJob() {
this.careerService.getJob(localStorage.getItem('selectedJobId'), localStorage.getItem('selectedLocation')).subscribe(res => {
localStorage.setItem('selectedJobTitle', res.title);
localStorage.setItem('selectedCity', res.city);
localStorage.setItem('selectedState', res.state);
localStorage.setItem('selectedPayRateOffset', res.payRateTypeName);
//this.careerService.selectedPayRateOffset = res.payRateTypeName;
this.careerService.selectedJobTitle = res.title;
this.careerService.selectedCity = res.city;
this.careerService.selectedState = res.state;
});
}
startOver() {
window.location.href = window.location.href.indexOf('localhost:') > 0 ? 'http://localhost:58683/careers' : '../careers';
}
continue() {
this.isLoading = true;
if (this.form.controls.gender.value == '') this.form.controls.gender.setValue('Prefer Not to Say');
if (this.form.controls.ethnicity.value == '') this.form.controls.ethnicity.setValue('Prefer Not to Say');
localStorage.setItem('selectedGender', this.form.controls.gender.value);
localStorage.setItem('selectedEthnicity', this.form.controls.ethnicity.value);
localStorage.setItem('appStep', 'StartApplication');
this.router.navigate(['/step/start']);
}
}
@Injectable()
export class ApplicationGuard implements CanActivate {
constructor(private careerService: CareersService, private router: Router, private location: Location, private app: AppSettings) { }
public isValid = false;
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canNavigate();
}
canNavigate() {
var currentStep = localStorage.getItem('appStep');
if (this.location.path().includes('review') && currentStep != 'Review') {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('education') && (currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/jobinfo']);
return false;
}
else if (this.location.path().includes('workhistory') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('jobinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education' && currentStep != 'JobInformation')) {
this.router.navigate(['/step/applicantinfo']);
return false;
}
else if (this.location.path().includes('applicantinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education'
&& currentStep != 'JobInformation' && currentStep != 'ApplicantInfo')) {
this.router.navigate(['/step/start']);
return false;
}
else {
return true;
}
}
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
window.document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = window.document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
window.document.cookie = name + '=; Max-Age=-99999999;';
}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatButtonModule } from "@angular/material/button";
import { ApplicationRoutingModule } from "./application-routing.module";
import { MatSelectModule } from "@angular/material";
import { ApplicationHeaderComponent, DemographicsComponent } from "./application.component";
//import { LittleTestComponent } from '../../little-test/little-test.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatCheckboxModule,
MatButtonModule,
ApplicationRoutingModule,
MatSelectModule,
//LittleTestComponent
],
declarations: [
ApplicationHeaderComponent,
DemographicsComponent,
//LittleTestComponent,
],
exports: [
ApplicationHeaderComponent,
DemographicsComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ApplicationModule {
}
<application-header></application-header>
<little-test></little-test>
<div class="application-content" *ngIf="!errorOccurred">
<p>
<strong style="margin-bottom: 30px;">
It is the policy of SCIS Air Security to provide equal employment opportunity to all qualified applicants for employment without regard to race, color, religion, national origin, sex, age, veteran status or disability.
</strong>
</p>
<p>
<em>
Completion of this form is voluntary and in no way affects the decision regarding your application for employment. This form is confidential, will be used only for government record keeping and reporting purposes and will be maintained separately from your application form.
</em>
</p>
<hr />
<form [formGroup]="form" (submit)="continue()" style="padding-top: 15px;">
<div class="alert alert-danger" *ngIf="error != '' && error != null">
{{error}}
</div>
<div class="row demographics-row">
<div class="col-sm">
<div class="field-container">
<mat-form-field class="gender">
<mat-select placeholder="Gender" formControlName="gender">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Female">
Female
</mat-option>
<mat-option value="Male">
Male
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="col-sm">
<div class="field-container">
<mat-form-field class="ethnicity">
<mat-select placeholder="Race / Ethnicity" formControlName="ethnicity">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Hispanic / Latino">
Hispanic / Latino
</mat-option>
<mat-option value="American Indian or Alaska Native">
American Indian or Alaska Native
</mat-option>
<mat-option value="Asian">
Asian
</mat-option>
<mat-option value="Black or African American">
Black or African American
</mat-option>
<mat-option value="Native Hawaiian or Other Pacific Islander">
Native Hawaiian or Other Pacific Islander
</mat-option>
<mat-option value="Caucasian / White">
Caucasian / White
</mat-option>
<mat-option value="Other">
Other
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm col-xs hidden-xs">
<button mat-button color="primary" *ngIf="isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<button mat-button color="primary" *ngIf="!isLoading" type="submit">Proceed to Application</button>
</div>
<div class="col-sm col-xs hidden-xs text-right">
<button mat-button color="danger" (click)="startOver()" type="button">Start Over</button>
</div>
</div>
<button mat-button color="primary" class="visible-xs" *ngIf="!careerService.isLoading" type="submit">Proceed to Application</button>
<button mat-button color="primary" class="visible-xs" *ngIf="careerService.isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<span class="fill-space" style="display: inline-block; min-width: calc(100vw - 400px);"></span>
<button mat-button color="danger" class="visible-xs" (click)="startOver()" type="button">Start Over</button>
</form>
</div>
<div class="alert alert-warning" *ngIf="errorOccurred">
<h4>Something went wrong retrieving the application</h4>
<p>
<button mat-button color="primary" (click)="startOver()" type="button">Try Again</button>
</p>
</div>
ng g c小测试import { Component, Injectable, Inject, OnInit } from '@angular/core';
import { CareersService } from '../../services/careers.service';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SelectListItem, AppSettings } from '../../settings/app.settings';
import { Education, HigherEducation, Language, WorkExperience, Applicant, Application } from '../../services/applicants.service';
import { CanActivate } from '@angular/router/src/interfaces';
import { LocationsService } from '../../services/locations.service';
import { StateItem } from '../../models/locations.models';
import { Location } from '@angular/common';
@Component({
selector: 'app-little-test',
templateUrl: '../../little-test/little-test.component.html',
styleUrls: ['../../little-test/little-test.component.css']
})
export class LittleTestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'application-header',
templateUrl: './applicationHeader.component.html',
styleUrls: ['./careers.component.css']
})
export class ApplicationHeaderComponent {
public currentStep: string = localStorage.getItem('appStep');
public applicationStepText: string;
public applicantDisabled: string;
public jobDisabled: string;
public educationDisabled: string;
public experienceDisabled: string;
public reviewDisabled: string;
public selectedJobTitle: string;
public selectedLocation: string;
public selectedCity: string = localStorage.getItem('selectedCity');
public selectedState: string = localStorage.getItem('selectedState');
constructor(public careerService: CareersService, private app: AppSettings) {
//this.currentStep = localStorage.getItem('appStep');
switch (this.currentStep) {
case 'Demographics':
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'ApplicantInfo':
this.applicationStepText = "Applicant Information";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'JobInformation':
this.applicationStepText = "Job Information";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'WorkHistory':
this.educationDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'Education':
this.applicationStepText = "Education";
this.reviewDisabled = "disabled";
break;
case 'Review':
this.applicationStepText = "Review";
break;
case 'Acknowledgement':
default:
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
}
}
ngOnInit() {
var disabled = document.getElementsByClassName('disabled');
for (var d in disabled) {
if (disabled[d] != null && disabled[d].attributes != null) {
disabled[d].setAttribute('routerLink', '');
disabled[d].addEventListener('click', function (e) {
e.preventDefault();
});
}
}
}
}
@Component({
selector: 'demographics',
templateUrl: 'demographics.component.html',
styleUrls: ['careers.component.css'],
})
export class DemographicsComponent {
public error: string = this.careerService.error;
public form: FormGroup;
public isLoading: boolean;
public errorOccurred: boolean;
constructor(public careerService: CareersService, private router: Router, fb: FormBuilder, private app: AppSettings, private route: ActivatedRoute) {
this.form = fb.group({
gender: [''],
ethnicity: ['']
});
}
ngOnInit() {
var jobId = '';
var csc = '';
localStorage.removeItem(this.careerService.AccessKeyName);
localStorage.setItem('appStep', 'Demographics');
if (this.route.snapshot.params.csc != null && this.route.snapshot.params.jobId != null) {
localStorage.setItem("selectedJobId", this.route.snapshot.params.jobId);
localStorage.setItem("selectedLocation", this.route.snapshot.params.csc);
localStorage.setItem("referrer", this.route.snapshot.params.referrer);
this.careerService.selectedJobId = this.route.snapshot.params.jobId;
this.careerService.selectedLocation = this.route.snapshot.params.csc;
this.getJob();
}
else {
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null ) {
this.careerService.getSelectedLocationAndJob().subscribe(res => {
localStorage.setItem("selectedJobId", res.jobId);
localStorage.setItem("selectedLocation", res.csc);
localStorage.setItem("referrer", "scis");
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null || localStorage.getItem('selectedLocation') == '') this.errorOccurred = true;
this.getJob();
});
}
}
}
getJob() {
this.careerService.getJob(localStorage.getItem('selectedJobId'), localStorage.getItem('selectedLocation')).subscribe(res => {
localStorage.setItem('selectedJobTitle', res.title);
localStorage.setItem('selectedCity', res.city);
localStorage.setItem('selectedState', res.state);
localStorage.setItem('selectedPayRateOffset', res.payRateTypeName);
//this.careerService.selectedPayRateOffset = res.payRateTypeName;
this.careerService.selectedJobTitle = res.title;
this.careerService.selectedCity = res.city;
this.careerService.selectedState = res.state;
});
}
startOver() {
window.location.href = window.location.href.indexOf('localhost:') > 0 ? 'http://localhost:58683/careers' : '../careers';
}
continue() {
this.isLoading = true;
if (this.form.controls.gender.value == '') this.form.controls.gender.setValue('Prefer Not to Say');
if (this.form.controls.ethnicity.value == '') this.form.controls.ethnicity.setValue('Prefer Not to Say');
localStorage.setItem('selectedGender', this.form.controls.gender.value);
localStorage.setItem('selectedEthnicity', this.form.controls.ethnicity.value);
localStorage.setItem('appStep', 'StartApplication');
this.router.navigate(['/step/start']);
}
}
@Injectable()
export class ApplicationGuard implements CanActivate {
constructor(private careerService: CareersService, private router: Router, private location: Location, private app: AppSettings) { }
public isValid = false;
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canNavigate();
}
canNavigate() {
var currentStep = localStorage.getItem('appStep');
if (this.location.path().includes('review') && currentStep != 'Review') {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('education') && (currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/jobinfo']);
return false;
}
else if (this.location.path().includes('workhistory') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('jobinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education' && currentStep != 'JobInformation')) {
this.router.navigate(['/step/applicantinfo']);
return false;
}
else if (this.location.path().includes('applicantinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education'
&& currentStep != 'JobInformation' && currentStep != 'ApplicantInfo')) {
this.router.navigate(['/step/start']);
return false;
}
else {
return true;
}
}
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
window.document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = window.document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
window.document.cookie = name + '=; Max-Age=-99999999;';
}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatButtonModule } from "@angular/material/button";
import { ApplicationRoutingModule } from "./application-routing.module";
import { MatSelectModule } from "@angular/material";
import { ApplicationHeaderComponent, DemographicsComponent } from "./application.component";
//import { LittleTestComponent } from '../../little-test/little-test.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatCheckboxModule,
MatButtonModule,
ApplicationRoutingModule,
MatSelectModule,
//LittleTestComponent
],
declarations: [
ApplicationHeaderComponent,
DemographicsComponent,
//LittleTestComponent,
],
exports: [
ApplicationHeaderComponent,
DemographicsComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ApplicationModule {
}
<application-header></application-header>
<little-test></little-test>
<div class="application-content" *ngIf="!errorOccurred">
<p>
<strong style="margin-bottom: 30px;">
It is the policy of SCIS Air Security to provide equal employment opportunity to all qualified applicants for employment without regard to race, color, religion, national origin, sex, age, veteran status or disability.
</strong>
</p>
<p>
<em>
Completion of this form is voluntary and in no way affects the decision regarding your application for employment. This form is confidential, will be used only for government record keeping and reporting purposes and will be maintained separately from your application form.
</em>
</p>
<hr />
<form [formGroup]="form" (submit)="continue()" style="padding-top: 15px;">
<div class="alert alert-danger" *ngIf="error != '' && error != null">
{{error}}
</div>
<div class="row demographics-row">
<div class="col-sm">
<div class="field-container">
<mat-form-field class="gender">
<mat-select placeholder="Gender" formControlName="gender">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Female">
Female
</mat-option>
<mat-option value="Male">
Male
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="col-sm">
<div class="field-container">
<mat-form-field class="ethnicity">
<mat-select placeholder="Race / Ethnicity" formControlName="ethnicity">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Hispanic / Latino">
Hispanic / Latino
</mat-option>
<mat-option value="American Indian or Alaska Native">
American Indian or Alaska Native
</mat-option>
<mat-option value="Asian">
Asian
</mat-option>
<mat-option value="Black or African American">
Black or African American
</mat-option>
<mat-option value="Native Hawaiian or Other Pacific Islander">
Native Hawaiian or Other Pacific Islander
</mat-option>
<mat-option value="Caucasian / White">
Caucasian / White
</mat-option>
<mat-option value="Other">
Other
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm col-xs hidden-xs">
<button mat-button color="primary" *ngIf="isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<button mat-button color="primary" *ngIf="!isLoading" type="submit">Proceed to Application</button>
</div>
<div class="col-sm col-xs hidden-xs text-right">
<button mat-button color="danger" (click)="startOver()" type="button">Start Over</button>
</div>
</div>
<button mat-button color="primary" class="visible-xs" *ngIf="!careerService.isLoading" type="submit">Proceed to Application</button>
<button mat-button color="primary" class="visible-xs" *ngIf="careerService.isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<span class="fill-space" style="display: inline-block; min-width: calc(100vw - 400px);"></span>
<button mat-button color="danger" class="visible-xs" (click)="startOver()" type="button">Start Over</button>
</form>
</div>
<div class="alert alert-warning" *ngIf="errorOccurred">
<h4>Something went wrong retrieving the application</h4>
<p>
<button mat-button color="primary" (click)="startOver()" type="button">Try Again</button>
</p>
</div>
import { Component, Injectable, Inject, OnInit } from '@angular/core';
import { CareersService } from '../../services/careers.service';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SelectListItem, AppSettings } from '../../settings/app.settings';
import { Education, HigherEducation, Language, WorkExperience, Applicant, Application } from '../../services/applicants.service';
import { CanActivate } from '@angular/router/src/interfaces';
import { LocationsService } from '../../services/locations.service';
import { StateItem } from '../../models/locations.models';
import { Location } from '@angular/common';
@Component({
selector: 'app-little-test',
templateUrl: '../../little-test/little-test.component.html',
styleUrls: ['../../little-test/little-test.component.css']
})
export class LittleTestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'application-header',
templateUrl: './applicationHeader.component.html',
styleUrls: ['./careers.component.css']
})
export class ApplicationHeaderComponent {
public currentStep: string = localStorage.getItem('appStep');
public applicationStepText: string;
public applicantDisabled: string;
public jobDisabled: string;
public educationDisabled: string;
public experienceDisabled: string;
public reviewDisabled: string;
public selectedJobTitle: string;
public selectedLocation: string;
public selectedCity: string = localStorage.getItem('selectedCity');
public selectedState: string = localStorage.getItem('selectedState');
constructor(public careerService: CareersService, private app: AppSettings) {
//this.currentStep = localStorage.getItem('appStep');
switch (this.currentStep) {
case 'Demographics':
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'ApplicantInfo':
this.applicationStepText = "Applicant Information";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'JobInformation':
this.applicationStepText = "Job Information";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'WorkHistory':
this.educationDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'Education':
this.applicationStepText = "Education";
this.reviewDisabled = "disabled";
break;
case 'Review':
this.applicationStepText = "Review";
break;
case 'Acknowledgement':
default:
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
}
}
ngOnInit() {
var disabled = document.getElementsByClassName('disabled');
for (var d in disabled) {
if (disabled[d] != null && disabled[d].attributes != null) {
disabled[d].setAttribute('routerLink', '');
disabled[d].addEventListener('click', function (e) {
e.preventDefault();
});
}
}
}
}
@Component({
selector: 'demographics',
templateUrl: 'demographics.component.html',
styleUrls: ['careers.component.css'],
})
export class DemographicsComponent {
public error: string = this.careerService.error;
public form: FormGroup;
public isLoading: boolean;
public errorOccurred: boolean;
constructor(public careerService: CareersService, private router: Router, fb: FormBuilder, private app: AppSettings, private route: ActivatedRoute) {
this.form = fb.group({
gender: [''],
ethnicity: ['']
});
}
ngOnInit() {
var jobId = '';
var csc = '';
localStorage.removeItem(this.careerService.AccessKeyName);
localStorage.setItem('appStep', 'Demographics');
if (this.route.snapshot.params.csc != null && this.route.snapshot.params.jobId != null) {
localStorage.setItem("selectedJobId", this.route.snapshot.params.jobId);
localStorage.setItem("selectedLocation", this.route.snapshot.params.csc);
localStorage.setItem("referrer", this.route.snapshot.params.referrer);
this.careerService.selectedJobId = this.route.snapshot.params.jobId;
this.careerService.selectedLocation = this.route.snapshot.params.csc;
this.getJob();
}
else {
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null ) {
this.careerService.getSelectedLocationAndJob().subscribe(res => {
localStorage.setItem("selectedJobId", res.jobId);
localStorage.setItem("selectedLocation", res.csc);
localStorage.setItem("referrer", "scis");
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null || localStorage.getItem('selectedLocation') == '') this.errorOccurred = true;
this.getJob();
});
}
}
}
getJob() {
this.careerService.getJob(localStorage.getItem('selectedJobId'), localStorage.getItem('selectedLocation')).subscribe(res => {
localStorage.setItem('selectedJobTitle', res.title);
localStorage.setItem('selectedCity', res.city);
localStorage.setItem('selectedState', res.state);
localStorage.setItem('selectedPayRateOffset', res.payRateTypeName);
//this.careerService.selectedPayRateOffset = res.payRateTypeName;
this.careerService.selectedJobTitle = res.title;
this.careerService.selectedCity = res.city;
this.careerService.selectedState = res.state;
});
}
startOver() {
window.location.href = window.location.href.indexOf('localhost:') > 0 ? 'http://localhost:58683/careers' : '../careers';
}
continue() {
this.isLoading = true;
if (this.form.controls.gender.value == '') this.form.controls.gender.setValue('Prefer Not to Say');
if (this.form.controls.ethnicity.value == '') this.form.controls.ethnicity.setValue('Prefer Not to Say');
localStorage.setItem('selectedGender', this.form.controls.gender.value);
localStorage.setItem('selectedEthnicity', this.form.controls.ethnicity.value);
localStorage.setItem('appStep', 'StartApplication');
this.router.navigate(['/step/start']);
}
}
@Injectable()
export class ApplicationGuard implements CanActivate {
constructor(private careerService: CareersService, private router: Router, private location: Location, private app: AppSettings) { }
public isValid = false;
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canNavigate();
}
canNavigate() {
var currentStep = localStorage.getItem('appStep');
if (this.location.path().includes('review') && currentStep != 'Review') {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('education') && (currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/jobinfo']);
return false;
}
else if (this.location.path().includes('workhistory') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('jobinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education' && currentStep != 'JobInformation')) {
this.router.navigate(['/step/applicantinfo']);
return false;
}
else if (this.location.path().includes('applicantinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education'
&& currentStep != 'JobInformation' && currentStep != 'ApplicantInfo')) {
this.router.navigate(['/step/start']);
return false;
}
else {
return true;
}
}
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
window.document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = window.document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
window.document.cookie = name + '=; Max-Age=-99999999;';
}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatButtonModule } from "@angular/material/button";
import { ApplicationRoutingModule } from "./application-routing.module";
import { MatSelectModule } from "@angular/material";
import { ApplicationHeaderComponent, DemographicsComponent } from "./application.component";
//import { LittleTestComponent } from '../../little-test/little-test.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatCheckboxModule,
MatButtonModule,
ApplicationRoutingModule,
MatSelectModule,
//LittleTestComponent
],
declarations: [
ApplicationHeaderComponent,
DemographicsComponent,
//LittleTestComponent,
],
exports: [
ApplicationHeaderComponent,
DemographicsComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ApplicationModule {
}
<application-header></application-header>
<little-test></little-test>
<div class="application-content" *ngIf="!errorOccurred">
<p>
<strong style="margin-bottom: 30px;">
It is the policy of SCIS Air Security to provide equal employment opportunity to all qualified applicants for employment without regard to race, color, religion, national origin, sex, age, veteran status or disability.
</strong>
</p>
<p>
<em>
Completion of this form is voluntary and in no way affects the decision regarding your application for employment. This form is confidential, will be used only for government record keeping and reporting purposes and will be maintained separately from your application form.
</em>
</p>
<hr />
<form [formGroup]="form" (submit)="continue()" style="padding-top: 15px;">
<div class="alert alert-danger" *ngIf="error != '' && error != null">
{{error}}
</div>
<div class="row demographics-row">
<div class="col-sm">
<div class="field-container">
<mat-form-field class="gender">
<mat-select placeholder="Gender" formControlName="gender">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Female">
Female
</mat-option>
<mat-option value="Male">
Male
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="col-sm">
<div class="field-container">
<mat-form-field class="ethnicity">
<mat-select placeholder="Race / Ethnicity" formControlName="ethnicity">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Hispanic / Latino">
Hispanic / Latino
</mat-option>
<mat-option value="American Indian or Alaska Native">
American Indian or Alaska Native
</mat-option>
<mat-option value="Asian">
Asian
</mat-option>
<mat-option value="Black or African American">
Black or African American
</mat-option>
<mat-option value="Native Hawaiian or Other Pacific Islander">
Native Hawaiian or Other Pacific Islander
</mat-option>
<mat-option value="Caucasian / White">
Caucasian / White
</mat-option>
<mat-option value="Other">
Other
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm col-xs hidden-xs">
<button mat-button color="primary" *ngIf="isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<button mat-button color="primary" *ngIf="!isLoading" type="submit">Proceed to Application</button>
</div>
<div class="col-sm col-xs hidden-xs text-right">
<button mat-button color="danger" (click)="startOver()" type="button">Start Over</button>
</div>
</div>
<button mat-button color="primary" class="visible-xs" *ngIf="!careerService.isLoading" type="submit">Proceed to Application</button>
<button mat-button color="primary" class="visible-xs" *ngIf="careerService.isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<span class="fill-space" style="display: inline-block; min-width: calc(100vw - 400px);"></span>
<button mat-button color="danger" class="visible-xs" (click)="startOver()" type="button">Start Over</button>
</form>
</div>
<div class="alert alert-warning" *ngIf="errorOccurred">
<h4>Something went wrong retrieving the application</h4>
<p>
<button mat-button color="primary" (click)="startOver()" type="button">Try Again</button>
</p>
</div>
import { Component, Injectable, Inject, OnInit } from '@angular/core';
import { CareersService } from '../../services/careers.service';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { SelectListItem, AppSettings } from '../../settings/app.settings';
import { Education, HigherEducation, Language, WorkExperience, Applicant, Application } from '../../services/applicants.service';
import { CanActivate } from '@angular/router/src/interfaces';
import { LocationsService } from '../../services/locations.service';
import { StateItem } from '../../models/locations.models';
import { Location } from '@angular/common';
@Component({
selector: 'app-little-test',
templateUrl: '../../little-test/little-test.component.html',
styleUrls: ['../../little-test/little-test.component.css']
})
export class LittleTestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
@Component({
selector: 'application-header',
templateUrl: './applicationHeader.component.html',
styleUrls: ['./careers.component.css']
})
export class ApplicationHeaderComponent {
public currentStep: string = localStorage.getItem('appStep');
public applicationStepText: string;
public applicantDisabled: string;
public jobDisabled: string;
public educationDisabled: string;
public experienceDisabled: string;
public reviewDisabled: string;
public selectedJobTitle: string;
public selectedLocation: string;
public selectedCity: string = localStorage.getItem('selectedCity');
public selectedState: string = localStorage.getItem('selectedState');
constructor(public careerService: CareersService, private app: AppSettings) {
//this.currentStep = localStorage.getItem('appStep');
switch (this.currentStep) {
case 'Demographics':
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'ApplicantInfo':
this.applicationStepText = "Applicant Information";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'JobInformation':
this.applicationStepText = "Job Information";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'WorkHistory':
this.educationDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
case 'Education':
this.applicationStepText = "Education";
this.reviewDisabled = "disabled";
break;
case 'Review':
this.applicationStepText = "Review";
break;
case 'Acknowledgement':
default:
this.applicationStepText = "Demographics";
this.applicantDisabled = "disabled";
this.jobDisabled = "disabled";
this.educationDisabled = "disabled";
this.experienceDisabled = "disabled";
this.reviewDisabled = "disabled";
break;
}
}
ngOnInit() {
var disabled = document.getElementsByClassName('disabled');
for (var d in disabled) {
if (disabled[d] != null && disabled[d].attributes != null) {
disabled[d].setAttribute('routerLink', '');
disabled[d].addEventListener('click', function (e) {
e.preventDefault();
});
}
}
}
}
@Component({
selector: 'demographics',
templateUrl: 'demographics.component.html',
styleUrls: ['careers.component.css'],
})
export class DemographicsComponent {
public error: string = this.careerService.error;
public form: FormGroup;
public isLoading: boolean;
public errorOccurred: boolean;
constructor(public careerService: CareersService, private router: Router, fb: FormBuilder, private app: AppSettings, private route: ActivatedRoute) {
this.form = fb.group({
gender: [''],
ethnicity: ['']
});
}
ngOnInit() {
var jobId = '';
var csc = '';
localStorage.removeItem(this.careerService.AccessKeyName);
localStorage.setItem('appStep', 'Demographics');
if (this.route.snapshot.params.csc != null && this.route.snapshot.params.jobId != null) {
localStorage.setItem("selectedJobId", this.route.snapshot.params.jobId);
localStorage.setItem("selectedLocation", this.route.snapshot.params.csc);
localStorage.setItem("referrer", this.route.snapshot.params.referrer);
this.careerService.selectedJobId = this.route.snapshot.params.jobId;
this.careerService.selectedLocation = this.route.snapshot.params.csc;
this.getJob();
}
else {
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null ) {
this.careerService.getSelectedLocationAndJob().subscribe(res => {
localStorage.setItem("selectedJobId", res.jobId);
localStorage.setItem("selectedLocation", res.csc);
localStorage.setItem("referrer", "scis");
if (localStorage.getItem('selectedJobId') == null || localStorage.getItem('selectedLocation') == null || localStorage.getItem('selectedLocation') == '') this.errorOccurred = true;
this.getJob();
});
}
}
}
getJob() {
this.careerService.getJob(localStorage.getItem('selectedJobId'), localStorage.getItem('selectedLocation')).subscribe(res => {
localStorage.setItem('selectedJobTitle', res.title);
localStorage.setItem('selectedCity', res.city);
localStorage.setItem('selectedState', res.state);
localStorage.setItem('selectedPayRateOffset', res.payRateTypeName);
//this.careerService.selectedPayRateOffset = res.payRateTypeName;
this.careerService.selectedJobTitle = res.title;
this.careerService.selectedCity = res.city;
this.careerService.selectedState = res.state;
});
}
startOver() {
window.location.href = window.location.href.indexOf('localhost:') > 0 ? 'http://localhost:58683/careers' : '../careers';
}
continue() {
this.isLoading = true;
if (this.form.controls.gender.value == '') this.form.controls.gender.setValue('Prefer Not to Say');
if (this.form.controls.ethnicity.value == '') this.form.controls.ethnicity.setValue('Prefer Not to Say');
localStorage.setItem('selectedGender', this.form.controls.gender.value);
localStorage.setItem('selectedEthnicity', this.form.controls.ethnicity.value);
localStorage.setItem('appStep', 'StartApplication');
this.router.navigate(['/step/start']);
}
}
@Injectable()
export class ApplicationGuard implements CanActivate {
constructor(private careerService: CareersService, private router: Router, private location: Location, private app: AppSettings) { }
public isValid = false;
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canNavigate();
}
canNavigate() {
var currentStep = localStorage.getItem('appStep');
if (this.location.path().includes('review') && currentStep != 'Review') {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('education') && (currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/jobinfo']);
return false;
}
else if (this.location.path().includes('workhistory') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education')) {
this.router.navigate(['/step/education']);
return false;
}
else if (this.location.path().includes('jobinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education' && currentStep != 'JobInformation')) {
this.router.navigate(['/step/applicantinfo']);
return false;
}
else if (this.location.path().includes('applicantinfo') && (currentStep != 'WorkHistory' && currentStep != 'Review' && currentStep != 'Education'
&& currentStep != 'JobInformation' && currentStep != 'ApplicantInfo')) {
this.router.navigate(['/step/start']);
return false;
}
else {
return true;
}
}
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
window.document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = window.document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
window.document.cookie = name + '=; Max-Age=-99999999;';
}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatButtonModule } from "@angular/material/button";
import { ApplicationRoutingModule } from "./application-routing.module";
import { MatSelectModule } from "@angular/material";
import { ApplicationHeaderComponent, DemographicsComponent } from "./application.component";
//import { LittleTestComponent } from '../../little-test/little-test.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatCheckboxModule,
MatButtonModule,
ApplicationRoutingModule,
MatSelectModule,
//LittleTestComponent
],
declarations: [
ApplicationHeaderComponent,
DemographicsComponent,
//LittleTestComponent,
],
exports: [
ApplicationHeaderComponent,
DemographicsComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ApplicationModule {
}
<application-header></application-header>
<little-test></little-test>
<div class="application-content" *ngIf="!errorOccurred">
<p>
<strong style="margin-bottom: 30px;">
It is the policy of SCIS Air Security to provide equal employment opportunity to all qualified applicants for employment without regard to race, color, religion, national origin, sex, age, veteran status or disability.
</strong>
</p>
<p>
<em>
Completion of this form is voluntary and in no way affects the decision regarding your application for employment. This form is confidential, will be used only for government record keeping and reporting purposes and will be maintained separately from your application form.
</em>
</p>
<hr />
<form [formGroup]="form" (submit)="continue()" style="padding-top: 15px;">
<div class="alert alert-danger" *ngIf="error != '' && error != null">
{{error}}
</div>
<div class="row demographics-row">
<div class="col-sm">
<div class="field-container">
<mat-form-field class="gender">
<mat-select placeholder="Gender" formControlName="gender">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Female">
Female
</mat-option>
<mat-option value="Male">
Male
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="col-sm">
<div class="field-container">
<mat-form-field class="ethnicity">
<mat-select placeholder="Race / Ethnicity" formControlName="ethnicity">
<mat-option value="Prefer not to say">
Prefer not to say
</mat-option>
<mat-option value="Hispanic / Latino">
Hispanic / Latino
</mat-option>
<mat-option value="American Indian or Alaska Native">
American Indian or Alaska Native
</mat-option>
<mat-option value="Asian">
Asian
</mat-option>
<mat-option value="Black or African American">
Black or African American
</mat-option>
<mat-option value="Native Hawaiian or Other Pacific Islander">
Native Hawaiian or Other Pacific Islander
</mat-option>
<mat-option value="Caucasian / White">
Caucasian / White
</mat-option>
<mat-option value="Other">
Other
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm col-xs hidden-xs">
<button mat-button color="primary" *ngIf="isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<button mat-button color="primary" *ngIf="!isLoading" type="submit">Proceed to Application</button>
</div>
<div class="col-sm col-xs hidden-xs text-right">
<button mat-button color="danger" (click)="startOver()" type="button">Start Over</button>
</div>
</div>
<button mat-button color="primary" class="visible-xs" *ngIf="!careerService.isLoading" type="submit">Proceed to Application</button>
<button mat-button color="primary" class="visible-xs" *ngIf="careerService.isLoading" type="button"><i class="fa fa-spin fa-spinner"></i></button>
<span class="fill-space" style="display: inline-block; min-width: calc(100vw - 400px);"></span>
<button mat-button color="danger" class="visible-xs" (click)="startOver()" type="button">Start Over</button>
</form>
</div>
<div class="alert alert-warning" *ngIf="errorOccurred">
<h4>Something went wrong retrieving the application</h4>
<p>
<button mat-button color="primary" (click)="startOver()" type="button">Try Again</button>
</p>
</div>
我没有正确使用选择器
变成
瞧 在little test.component.ts
中检查选择器。默认情况下，它通常app something
。（即