要解决Angular 6中组件中的电子邮件模式验证不起作用的问题，您可以按照以下步骤操作：

1. 在组件的HTML模板中，确保您使用了Angular的表单，以便进行验证。例如，使用ngForm或formGroup指令。

  
  Submit

2. 在组件的类中，确保已经导入了必要的模块。

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
  styleUrls: ['./email-form.component.css']
})
export class EmailFormComponent {
  email: string;

  submitForm(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted successfully');
    } else {
      console.log('Invalid form');
    }
  }
}

3. 如果电子邮件模式验证仍然不起作用，您可以尝试手动添加一个自定义验证器。在组件的类中，添加一个validateEmail方法来验证电子邮件格式。

import { Component } from '@angular/core';
import { NgForm, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'app-email-form',
  templateUrl: './email-form.component.html',
  styleUrls: ['./email-form.component.css']
})
export class EmailFormComponent {
  email: string;

  submitForm(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted successfully');
    } else {
      console.log('Invalid form');
    }
  }

  validateEmail(control: AbstractControl): ValidationErrors | null {
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (control.value && !emailPattern.test(control.value)) {
      return { invalidEmail: true };
    }
    return null;
  }
}

4. 在组件的HTML模板中，将该自定义验证器应用到电子邮件输入框上，并添加错误消息。

  
  

    
Email is required.
    
Invalid email format.
    
Invalid email address.
  
  Submit

5. 在组件的类中，添加一个指令来应用自定义验证器。

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[email-validation][ngModel]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: EmailValidationDirective,
      multi: true
    }
  ]
})
export class EmailValidationDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (control.value && !emailPattern.test(control.value)) {
      return { invalidEmail: true };
    }
    return null;
  }
}

通过上述步骤，您应该能够解决Angular 6中组件中电子邮件模式验证不起作用的问题。请注意，如果您在使用Angular Material或其他UI库时进行表单验证，可能需要相应地调整这些示例代码。