创建包装器模板组件并注入内部组件模板

Question

我想创建一个模板组件包装器，用于包装我的自定义模板。

我需要将它作为组件，因为我不想在内部注入东西并做一些逻辑。

这是我的带有hello包装器的组件的简单示例：

@Component({
  selector: 'my-component',
  template:
  `<hello><div>This is my component</div></hello>`
})
export class MyComponent{}

我希望输出看起来像这样：

<div>
  <div>hello component intro</div>
  <div>This is my component</div> <!-- This is the injection I'm looking for -->
  <div>hello component outro</div>
</div>

Hello组件：

@Component({
  selector: 'hello',
  template:
   `<div>
      <div>hello component intro</div>
         #####Inject here#####
      <div>hello component outro</div>
   </div>`
})
export class HelloComponent{}

有什么方法可以将模板注入包装器组件中？

如果有帮助，我正在使用Angular 6。

Answer 1

  

您要寻找的是package abc.AvailableCars; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.text.Editable; import android.text.TextWatcher; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.EditText; import android.widget.ListView; public class CarListActivity extends Activity { private ListView carListView; ArrayAdapter<String> listViewAdapter; ArrayList<HashMap<String, String>> CarList; EditText editTextSearch; EditText editTextCarAmount; Integer cListviewPosition = 0; int cLitemPosition = 0; String cLRowContent; String cLItemContent; String[] ALL_CARS; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.car_list_layout); carListView = (ListView) findViewById(R.id.list_view); editTextSearch = (EditText) findViewById(R.id.inputSearch); editTextSearch.setSingleLine(); editTextCarAmount = (EditText) findViewById(R.id.carAmount); editTextCarAmount.setSingleLine(); ALL_CARS = new String[]{"European Cars:", "Mercedes", "Passat", "Bently", "Porsche", "BMW", "Yugo", "Land Rover", "Japanese Cars:", "Maxima GXE", "Mazda6", "Avalon", "Toyota", "Honda", ""}; final ArrayAdapter<String> carAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, ALL_CARS); carListView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, ALL_CARS) { @Override public View getView(int rowPosition, View convertView, ViewGroup parent) { View row = super.getView(rowPosition, convertView, parent); if(getItem(rowPosition).equals("European Cars:") || getItem(rowPosition).equals("Japanese Cars:")) { row.setBackgroundColor(Color.parseColor("#B7B7B7")); } // both of the getItems end here. else { row.setBackgroundColor(Color.parseColor("#EEE8AA")); } // else ends here. // Enable the search filter: editTextSearch.addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence charSeq, int arg1, int arg2, int arg3) { // Search for each letter typed in the editText: carAdapter.getFilter().filter(charSeq); } // onTextChanged ends here. @Override public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) { // TODO Auto-generated method stub } // beforeTextChanged ends here. @Override public void afterTextChanged(Editable arg0) { // TODO Auto-generated method stub } // afterTextChanged ends here. } // addTextChangedListener ends here. ); // TextWatcher ends here. carListView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // The ListView Row That Was Clicked cLitemPosition = position; // The Content Of The ListView Row That Was Clicked cLItemContent = (String) carListView.getItemAtPosition(position); cListviewPosition = cLitemPosition; cLRowContent = cLItemContent; editTextSearch.setText(""); editTextSearch.setText(cLRowContent); } // position ends here. } // setOnItemClickListener ends here. ); // AdapterView.OnItemClickListener ends here. return row; } // getView ends here. }); // carListView.setAdapter ends here. } // onCreate ends here. } // CarListActivity ends here. 。

只需在要动态注入内容的组件中使用Content Projection。

hello.component.ts

<ng-content></ng-content>

用法

@Component({
  selector: 'hello',
  template:
   `<div>
      <div>hello component intro</div>
         <ng-content></ng-content> <!-- CONTENT WILL BE ADDED HERE -->
      <div>hello component outro</div>
   </div>`
})
export class HelloComponent{}

它将产生

<hello>
  <div>This is my component</div> <!-- This is the injection I'm looking for -->
</hello>