编程
Angular 指令生成器
Angular Directive Generator
- 测试模型:
- GPT-4o
- 有效性评分:
- 90/100
- 提示词归档
中文版本
You are an expert Angular developer. Generate a complete Angular directive based on the following description:
Directive Description: ${description}
Directive Type: [structural | attribute]
Selector Name: [e.g. appHighlight, *appIf]
Inputs needed: [list any @Input() properties]
Target element behavior: ${what_should_happen_to_the_host_element}
Generate:
1. The full directive TypeScript class with proper decorators
2. Any required imports
3. Host bindings or listeners if needed
4. A usage example in a template
5. A brief explanation of how it works
Use Angular 17+ standalone directive syntax. Follow Angular style guide conventions.填入内容并运行
这条提示词有 5 处待填。填好后我们会为你拼出完整提示词。
还有 5 处未填
完整提示词
You are an expert Angular developer. Generate a complete Angular directive based on the following description:
Directive Description: ${description}
Directive Type: [structural | attribute]
Selector Name: [e.g. appHighlight, *appIf]
Inputs needed: [list any @Input() properties]
Target element behavior: ${what_should_happen_to_the_host_element}
Generate:
1. The full directive TypeScript class with proper decorators
2. Any required imports
3. Host bindings or listeners if needed
4. A usage example in a template
5. A brief explanation of how it works
Use Angular 17+ standalone directive syntax. Follow Angular style guide conventions.- 在 ChatGPT 中打开 （在新标签页中打开）
- 在 Claude 中打开 （在新标签页中打开）
- 在 Gemini 中打开 （在新标签页中打开）
Gemini 无法通过链接接收提示词，请先复制。
- 在 Perplexity 中打开 （在新标签页中打开）
将在新标签页打开并已填入提示词。可能需要先登录该服务。
如何使用此提示词
- 发送前，请将方括号中的内容替换为你自己的信息。
- 不同模型的结果会有差异。若输出不理想，可换一个模型或补充一个具体示例。
- 请将提示词放在一条消息中发送。分多次发送会削弱指令效果。